KoolReport
  1. Home
  2. ChartJs
  3. Tooltip: Callbacks
Tooltip Hooks

The above example shows you how to create LineChart 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 line chart using callback to sum values ​​with same column.

For example:

...
"tooltips" => array(
    ...
    "callbacks" => array(
        "footer" => "function(tooltipItems, data){
            var sum = 0;
            tooltipItems.forEach(function(tooltipItem){
                sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
            });
            return 'Sum: ' + sum;
        }"
    )
)
...

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

<html>

<head>
    <title>
        Tooltip Hooks
    </title>
</head>

<body>
</body>

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

<div id="report_render">
    <?php
    function randomScalingFactor()
    {
        return mt_rand(-100, 100);
    }

    $data = [
        ['month' => 'January', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
        ['month' => 'February', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
        ['month' => 'March', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
        ['month' => 'April', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
        ['month' => 'May', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
        ['month' => 'June', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
        ['month' => 'July', 'My First dataset' => randomScalingFactor(), 'My Second dataset' => randomScalingFactor()],
    ];

    \koolreport\chartjs\LineChart::create(array(
        'dataSource' => $data,
        'columns' => array(
            "month",
            "My First dataset" => array(
                "backgroundColor" => 'rgb(255, 99, 132)',
                "borderColor" => 'rgb(255, 99, 132)',
                'fill' => false
            ),
            "My Second dataset" => array(
                "backgroundColor" => 'rgb(54, 162, 235)',
                "borderColor" => 'rgb(54, 162, 235)',
                'fill' => false
            )
        ),
        "options" => array(
            "responsive" => true,
            "title" => array(
                "display" => true,
                "text" => 'Chart.js Line Chart - Custom Information in Tooltip'
            ),
            "tooltips" => array(
                "mode" => 'index',
                "callbacks" => array(
                    "footer" => "function(tooltipItems, data){
                        var sum = 0;
                        tooltipItems.forEach(function(tooltipItem){
                            sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
                        });
                        return 'Sum: ' + sum;
                    }"
                ),
                "footerFontStyle" => 'normal'
            ),
            "hover" => array(
                "mode" => "index",
                "intersect" => true
            ),
            "scales" => array(
                "xAxes" => array(
                    array(
                        "display" => true,
                        "scaleLabel" => array(
                            "display" => true,
                            "labelString" => 'Month'
                        )
                    )
                ),
                "yAxes" => array(
                    array(
                        "display" => true,
                        "scaleLabel" => array(
                            "display" => true,
                            "labelString" => 'Value'
                        )
                    )
                )
            )
        )
    ));
    ?>
</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