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 stepped line chart using the steppedLine property.
The following values are supported for stepped.
false: No Step Interpolation (default)
true: Step-before Interpolation (eq. 'before')
'before': Step-before Interpolation
'after': Step-after Interpolation
'middle': Step-middle Interpolation
If the stepped value is set to anything other than false, tension will be ignored.
For example:
...
"columns" => array(
"day",
"steppedLine" => array(
...
"config" => array(
"steppedLine" => true,
...
)
)
)
...
<?php
if (session_status() !== PHP_SESSION_ACTIVE) session_start();
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>
<html>
<head>
<title>
Line Chart Stepped
</title>
</head>
<body>
</body>
</html>
<?php
class MyReport extends \koolreport\KoolReport
{
}
<div id="report_render" style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
<?php
function randomScalingFactor()
{
return mt_rand(-100, 100);
}
$steppedLineSettings = [
["steppedLine" => false, "label" => 'No Step Interpolation', "color" => "rgb(255, 99, 132)"],
["steppedLine" => true, "label" => 'Step Before Interpolation', "color" => "rgb(75, 192, 192)"],
["steppedLine" => "before", "label" => 'Step Before Interpolation', "color" => "rgb(75, 192, 192)"],
["steppedLine" => "after", "label" => 'Step After Interpolation', "color" => "rgb(153, 102, 255)"],
["steppedLine" => "middle", "label" => 'Step Middle Interpolation', "color" => "rgb(54, 162, 235)"],
];
$data = [
['day' => 'Day 1', 'steppedLine' => randomScalingFactor()],
['day' => 'Day 2', 'steppedLine' => randomScalingFactor()],
['day' => 'Day 3', 'steppedLine' => randomScalingFactor()],
['day' => 'Day 4', 'steppedLine' => randomScalingFactor()],
['day' => 'Day 5', 'steppedLine' => randomScalingFactor()],
['day' => 'Day 6', 'steppedLine' => randomScalingFactor()]
];
for ($i = 0; $i < count($steppedLineSettings); $i++) {
?>
<div style="width:500px;margin-left: 40px;margin-right: 40px;margin-bottom: 40px;">
<?php
\koolreport\chartjs\LineChart::create(array(
'dataSource' => $data,
'columns' => array(
"day",
"steppedLine" => array(
"label" => "steppedLine: " . json_encode($steppedLineSettings[$i]["steppedLine"]),
"type" => "number",
"config" => array(
"steppedLine" => $steppedLineSettings[$i]["steppedLine"],
"borderColor" => $steppedLineSettings[$i]["color"],
"backgroundColor" => $steppedLineSettings[$i]["color"]
)
)
),
"options" => array(
"responsive" => true,
"title" => array(
"display" => true,
"text" => $steppedLineSettings[$i]["label"]
)
)
));
?>
</div>
<?php
}
?>
</div>
