KoolReport
  1. Home
  2. ChartJs
  3. Logarithmic: Scatter
Scatter Chart

The above example shows you how to create ScatterChart using ChartJs package. In this example, for purpose of chart demonstration only, we do use mock-up data from array. As you can see, the KoolReport's widget in general support dataSource could be DataStore, Process, DataSource or even simple array.

This example shows how to build a scatter chart with values ​​on the y-axis and x-axis set using a callback.

For example:

...
"scales" => array(
    "xAxes" => array(
        array(
            ...
            "ticks" => array(
                "callback" => "function(tick) {
                    var remain = tick / (Math.pow(10, Math.floor(Math.log10(tick))));
                    if (remain === 1 || remain === 2 || remain === 5) {
                        return tick.toString() + 'Hz';
                    }
                    return '';
                }"
            ),
        )
    ),
    "yAxes" => array(
        array(
            ...
            "ticks" => array(
                "callback" => "function (tick) {
                    return tick.toString() + 'dB';
                }"
            ),
        )
    )
)

<?php
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>

<html>

<head>
    <title>
        Scatter Chart
    </title>
</head>

<body>
</body>

</html>
<?php
class MyReport extends \koolreport\KoolReport
{
    
}

<div id="report_render">
    <?php
    $data = [
        ['x' => 1,      'y' => -1.711e-2],
        ['x' => 1.26,   'y' => -2.7008e-2],
        ['x' => 1.58,   'y' => -4.285e-2],
        ['x' => 2.0,    'y' => -6.772e-2],
        ['x' => 2.51,   'y' => -1.068e-1],
        ['x' => 3.16,   'y' => -1.681e-1],
        ['x' => 3.98,   'y' => -2.635e-1],
        ['x' => 5.01,   'y' => -4.106e-1],
        ['x' => 6.31,   'y' => -6.339e-1],
        ['x' => 7.94,   'y' => -9.659e-1],
        ['x' => 10.00,  'y' => -1.445],
        ['x' => 12.6,   'y' => -2.110],
        ['x' => 15.8,   'y' => -2.992],
        ['x' => 20.0,   'y' => -4.102],
        ['x' => 25.1,   'y' => -5.429],
        ['x' => 31.6,   'y' => -6.944],
        ['x' => 39.8,   'y' => -8.607],
        ['x' => 50.1,   'y' => -1.038e1],
        ['x' => 63.1,   'y' => -1.223e1],
        ['x' => 79.4,   'y' => -1.413e1],
        ['x' => 100.00, 'y' => -1.607e1],
        ['x' => 126,    'y' => -1.803e1],
        ['x' => 158,    'y' => -2e1],
        ['x' => 202,    'y' => -2.199e1],
        ['x' => 251,    'y' => -2.398e1],
        ['x' => 316,    'y' => -2.597e1],
        ['x' => 398,    'y' => -2.797e1],
        ['x' => 501,    'y' => -2.996e1],
        ['x' => 631,    'y' => -3.196e1],
        ['x' => 794,    'y' => -3.396e1],
        ['x' => 1000,   'y' => -3.596e1]
    ];

    \koolreport\chartjs\ScatterChart::create(array(
        'dataSource' => $data,
        'series' => array(
            array(
                'x', 'y',
                array(
                    "label" => 'V(node2)',
                    "borderColor" => 'rgb(255, 99, 132)',
                    "backgroundColor" => 'rgba(255, 99, 132, 0.5)'
                )
            )
        ),
        "options" => array(
            "title" => array(
                "display" => true,
                "text" => 'Chart.js Scatter Chart - Logarithmic X-Axis'
            ),
            "scales" => array(
                "xAxes" => array(
                    array(
                        "type" => "logarithmic",
                        "position" => "bottom",
                        "ticks" => array(
                            "callback" => "function(tick) {
                                var remain = tick / (Math.pow(10, Math.floor(Math.log10(tick))));
                                if (remain === 1 || remain === 2 || remain === 5) {
                                    return tick.toString() + 'Hz';
                                }
                                return '';
                            }"
                        ),
                        "scaleLabel" => array(
                            "labelString" => 'Frequency',
                            "display" => true,
                        )
                    )
                ),
                "yAxes" => array(
                    array(
                        "type" => "linear",
                        "ticks" => array(
                            "callback" => "function (tick) {
                                return tick.toString() + 'dB';
                            }"
                        ),
                        "scaleLabel" => array(
                            "labelString" => 'Voltage',
                            "display" => true
                        )
                    )
                )
            )
        )
    ));
    ?>
</div>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport Get KoolReport Pro