The above example shows you how to create BarChart 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 stacked column chart using the stacked property and specifying the stack for each column.
For example:
...
"columns" => array(
"month",
"Dataset 1" => array(
...
"config" => array(
"stack" => 'Stack 0'
)
),
"Dataset 2" => array(
...
"config" => array(
"stack" => 'Stack 0'
)
),
"Dataset 3" => array(
...
"config" => array(
"stack" => 'Stack 1'
)
)
),
"options" => array(
...
"scales" => array(
"xAxes" => array(
array(
"stacked" => true,
)
),
"yAxes" => array(
array(
"stacked" => 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();
?>
<?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>
Stacked Bar Chart with Groups
</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>
<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);
}
})
})
})
</script>
<div>
<div id='report_render'>
</div>
</div>
</body>
</html>
<div id="report_render">
<?php
function randomScalingFactor()
{
return mt_rand(-100, 100);
}
$data = [
['month' => 'January', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
['month' => 'February', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
['month' => 'March', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
['month' => 'April', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
['month' => 'May', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
['month' => 'June', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
['month' => 'July', 'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
];
\koolreport\chartjs\ColumnChart::create(array(
'dataSource' => $data,
'columns' => array(
"month",
"Dataset 1" => array(
"backgroundColor" => 'rgb(255, 99, 132)',
"borderColor" => 'rgb(255, 99, 132)',
"config" => array(
"stack" => 'Stack 0'
)
),
"Dataset 2" => array(
"backgroundColor" => 'rgb(54, 162, 235)',
"borderColor" => 'rgb(54, 162, 235)',
"config" => array(
"stack" => 'Stack 0'
)
),
"Dataset 3" => array(
"backgroundColor" => 'rgb(75, 192, 192)',
"borderColor" => 'rgb(75, 192, 192)',
"config" => array(
"stack" => 'Stack 1'
)
)
),
"options" => array(
"responsive" => true,
"title" => array(
"display" => true,
"text" => 'Chart.js Bar Chart - Stacked'
),
"tooltips" => array(
"mode" => 'index',
"intersect" => false
),
"scales" => array(
"xAxes" => array(
array(
"stacked" => true,
)
),
"yAxes" => array(
array(
"stacked" => true,
)
)
)
)
));
?>
</div>
