Currently we have not had the waterfall chart. Do you currently use any kinds of javascript waterfall chart?

Hi Sajid,

If you have the canvasjs waterfall chart then you need to connect data from dataStore of KoolReport to the dataPoints of Waterfall. Here are few step:

1. Paste the script link to the canvasjs in the view of your report ( so that canvasjs can be loaded)
2. Prepare the data for dataPoints. dataPoints is an array of object containing label and value so we will do this:

<?php
$dataPoints = array();
foreach($this->dataStore("yourstore") as $item)
{
    array_push($dataPoints,array(
        "label"=>$item["your-category-column-name"],
        "value"=>$item["your-value-column-name"]
    ));
}
?>

Now you have the the PHP array $dataPoints, In order to convert it into dataPoint of canvasjs, you will use the json_encode() function:

3 Create your waterfall like you normally do, and at the dataPoints settings, you do:

var chart = new CanvasJS.Chart("chartContainer", {
    ...
    data:{
        dataPoints:<?php echo json_encode($dataPoints); ?>
    }
    ...
}

All done! Hope that helps.

I would like to share our new D3 package with Waterfall chart.