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 with different grid line color styles using the color property.
For example:
...
"yAxes" => array(
array(
"gridLines" => array(
"drawBorder" => false,
"color" => array('pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple')
),
...
)
)
...
<?php
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>
<html>
<head>
<title>
Grid Line Style Settings
</title>
</head>
<body>
</body>
</html>
<?php
class MyReport extends \koolreport\KoolReport
{
}
<div id="report_render">
<?php
$data = [
['month' => 'January', 'My First dataset' => 10, 'My Second dataset' => 18],
['month' => 'February', 'My First dataset' => 30, 'My Second dataset' => 33],
['month' => ' March', 'My First dataset' => 39, 'My Second dataset' => 22],
['month' => 'April', 'My First dataset' => 20, 'My Second dataset' => 19],
['month' => 'May', 'My First dataset' => 25, 'My Second dataset' => 11],
['month' => 'June', 'My First dataset' => 34, 'My Second dataset' => 39],
['month' => 'July', 'My First dataset' => -10, 'My Second dataset' => 30]
];
\koolreport\chartjs\LineChart::create(array(
'dataSource' => $data,
'columns' => array(
"month",
"My First dataset" => array(
"fill" => false,
"backgroundColor" => 'rgb(255, 99, 132)',
"borderColor" => 'rgb(255, 99, 132)'
),
"My Second dataset" => array(
"fill" => false,
"backgroundColor" => 'rgb(54, 162, 235)',
"borderColor" => 'rgb(54, 162, 235)'
)
),
"options" => array(
"responsive" => true,
"title" => array(
"display" => true,
"text" => "Grid Line Settings",
),
"scales" => array(
"yAxes" => array(
array(
"gridLines" => array(
"drawBorder" => false,
"color" => array('pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple')
),
"ticks" => array(
"min" => 0,
"max" => 100,
"stepSize" => 10
)
)
)
)
)
));
?>
</div>
</div>
