KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

Waterfall chart #1068

Open sajid opened this topic on on Aug 30 - 5 comments

sajid commented on Aug 30

Any sample for how to build a waterfall chart using KoolReport Pro?

KoolReport commented on Sep 2

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

sajid commented on Sep 2

https://canvasjs.com/javascript-charts/waterfall-chart/

Eugene commented on Sep 3

+1

this type of chart is very popular in finance reports... it would be great if you add it to Kollreport package

KoolReport commented on Sep 6

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.

Eugene commented on Sep 6

Great, thank you

Give tips to supporter for his good work

If you feel that supporter has done a good work, consider giving him some credit. Any amount put into the tips box below is appreciated. By doing so, you have contribtuted to the existence of KoolReport and the quality of support.

Tips box
help needed
suggestion

None