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 basic pie chart.
<?php
if (session_status() !== PHP_SESSION_ACTIVE) session_start();
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
?>
<?php
if (isset($_POST['command'])) {
?>
<div id='report_render'>
<?php
$report->render();
?>
</div>
<?php
exit;
}
?>
<?php
if (isset($_GET)) {
?>
<div id='report_render'>
<?php
$report->render();
?>
</div>
<?php
}
?>
<html>
<head>
<title>
Pie Chart
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<br>
<button id="randomizeData" class="btn">Randomize Data</button>
<button id="addDataset" class="btn">Add Dataset</button>
<button id="removeDataset" class="btn">Remove Dataset</button>
<script>
$(document).ready(function() {
$('#randomizeData').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url:"run.php",
data: {
command: 'randomizeData',
},
success: function(response) {
$('#report_render').html(response);
}
})
})
$('#addDataset').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url:"run.php",
data: {
command: 'addDataset'
},
success: function(response) {
$('#report_render').html(response);
}
})
})
$('#removeDataset').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url:"run.php",
data: {
command: 'removeDataset'
},
success: function(response) {
$('#report_render').html(response);
}
})
})
})
</script>
<div>
<div id='report_render'>
</div>
</div>
</body>
</html>
<?php
class MyReport extends \koolreport\KoolReport
{
}
<div style="width:50%;" id="report_render">
<?php
function randomScalingFactor()
{
return mt_rand(0, 100);
}
$data = [
['name' => 'Red', 'series1' => randomScalingFactor()],
['name' => 'Orange', 'series1' => randomScalingFactor()],
['name' => 'Yellow', 'series1' => randomScalingFactor()],
['name' => 'Green', 'series1' => randomScalingFactor()],
['name' => 'Blue', 'series1' => randomScalingFactor()],
];
$series = array('name');
$seriesString = '';
if (!isset($_POST['command'])) {
$_SESSION["finalSerialNumber"] = 1;
$_SESSION["toSeriesDelete"] = 0;
$_SESSION['data'] = $data;
for ($i = 1; $i <= $_SESSION['finalSerialNumber']; $i++) {
array_push($series, "series" . $i);
}
}
if (isset($_POST['command']) && $_POST['command'] === 'randomizeData') {
$valueI = $_SESSION['finalSerialNumber'] - $_SESSION['toSeriesDelete'];
foreach ($_SESSION['data'] as &$entry) {
for ($i = $valueI; $i <= $_SESSION['finalSerialNumber']; $i++) {
$entry['series' . $i] = randomScalingFactor();
}
}
for ($i = $valueI; $i <= $_SESSION['finalSerialNumber']; $i++) {
array_push($series, 'series' . $i);
}
}
if (isset($_POST['command']) && $_POST['command'] === 'addDataset') {
$_SESSION['finalSerialNumber'] = $_SESSION['finalSerialNumber'] + 1;
$_SESSION["toSeriesDelete"] = $_SESSION["toSeriesDelete"] + 1;
$seriesString = 'series' . $_SESSION['finalSerialNumber'];
foreach ($_SESSION['data'] as &$entry) {
$entry[$seriesString] = randomScalingFactor();
}
$valueI = $_SESSION['finalSerialNumber'] - $_SESSION['toSeriesDelete'];
for ($i = $valueI; $i <= $_SESSION['finalSerialNumber']; $i++) {
array_push($series, 'series' . $i);
}
}
if (isset($_POST['command']) && $_POST['command'] === 'removeDataset') {
if (count($_SESSION['data'][0]) > 1) {
foreach ($_SESSION['data'] as &$item) {
array_splice($item, 1, 1);
}
$_SESSION['toSeriesDelete'] = $_SESSION['toSeriesDelete'] - 1;
$valueI = $_SESSION['finalSerialNumber'] - $_SESSION['toSeriesDelete'];
for ($i = $valueI; $i <= $_SESSION['finalSerialNumber']; $i++) {
array_push($series, 'series' . $i);
}
}
}
\koolreport\chartjs\PieChart::create(array(
'dataSource' => $_SESSION['data'],
'columns' => $series,
"options" => array(
"responsive" => true,
),
"colorScheme" => array(
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)"
)
));
?>
</div>
