The above example shows you how to create PieChart 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 modified tooltip interface using the custom property.
For example:
...
"tooltips" => array(
...
"custom" => " function(tooltip) {
...
}
)
...
<?php
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>
<html>
<head>
<title>
Pie Chart with Custom Tooltips
</title>
<style>
canvas {
width: 100%;
margin-top: 50px;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
</body>
</html>
<?php
class MyReport extends \koolreport\KoolReport
{
}
<div id="report_render" style="width: 50%;">
<?php
function randomScalingFactor()
{
return mt_rand(-100, 100);
}
$data = [
['labels' => 'Red', 'series1' => 300],
['labels' => 'Orange', 'series1' => 50],
['labels' => 'Yellow', 'series1' => 100],
['labels' => 'Green', 'series1' => 40],
['labels' => 'Blue', 'series1' => 10],
];
\koolreport\chartjs\PieChart::create(array(
'dataSource' => $data,
'columns' => array(
'labels',
"series1"
),
"colorScheme" => array(
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)"
),
"options" => array(
"responsive" => true,
"legend" => array(
'display' => false,
),
'tooltips' => array(
'enabled' => false,
"custom" => "function(tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span class=\"chartjs-tooltip-key\" style=\"' + style + '\"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.bodyFontSize;
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
}"
),
"pointHitDetectionRadius" => 1
)
));
?>
<div id="chartjs-tooltip">
<table></table>
</div>
</div>
