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 the position of the tooltip relative to the point using the position property.
Possible modes are:
'average'
'nearest'
'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.
You can also define custom position modes.
For example:
...
"options" => array(
...
"tooltips" => array(
"position" => 'average'
...
)
)
...
<?php
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>
<html>
<head>
<title>
Tooltip Interaction Modes
</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
$options = ['average', 'nearest'];
$data = [
['month' => 'January', 'My First dataset' => 10, 'My Second dataset' => 7],
['month' => 'February', 'My First dataset' => 30, 'My Second dataset' => 49],
['month' => 'March', 'My First dataset' => 46, 'My Second dataset' => 46],
['month' => 'April', 'My First dataset' => 2, 'My Second dataset' => 13],
['month' => 'May', 'My First dataset' => 8, 'My Second dataset' => 25],
['month' => 'June', 'My First dataset' => 50, 'My Second dataset' => 30],
['month' => 'July', 'My First dataset' => 0, 'My Second dataset' => 22],
];
for ($i = 0; $i < count($options); $i++) {
?>
<div style="width:500px;margin-left: 40px;margin-right: 40px;">
<?php
\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" => 'Tooltip Position: ' . $options[$i]
),
"tooltips" => array(
"position" => $options[$i],
"mode" => 'index',
"intersect" => false
)
)
));
?>
</div>
<?php
}
?>
</div>
