Grouping data in ChartJS and PHP - php

Question

Hi have a data table which i am trying to draw a graph of using ChartJS. The data array looks like below
Array
(
[0] => Array
(
[Sort] => 2
[Weeks] => 1-2 Weeks
[Severity] => P1
[Count] => 7
)
[1] => Array
(
[Sort] => 2
[Weeks] => 1-2 Weeks
[Severity] => P2
[Count] => 3
)
[2] => Array
(
[Sort] => 2
[Weeks] => 1-2 Weeks
[Severity] => P3
[Count] => 4
)
[3] => Array
(
[Sort] => 2
[Weeks] => 1-2 Weeks
[Severity] => P4
[Count] => 3
)
[4] => Array
(
[Sort] => 3
[Weeks] => 2-3 weeks
[Severity] => P1
[Count] => 1
)
[5] => Array
(
[Sort] => 4
[Weeks] => >4 weeks
[Severity] => No Value
[Count] => 1
)
[6] => Array
(
[Sort] => 4
[Weeks] => >4 weeks
[Severity] => P1
[Count] => 1
)
[7] => Array
(
[Sort] => 4
[Weeks] => >4 weeks
[Severity] => P3
[Count] => 1
)
)
I converted that array compatible with ChartJS like below
Array
(
[labels] => Array
(
[0] => >4 weeks
[1] => 2-3 weeks
[2] => 1-2 Weeks
)
[datasets] => Array
(
[0] => Array
(
[label] => No Value
[backgroundColor] => #F00
[borderColor] => #F00
[borderWidth] => 1
[maxBarThickness] => 50
[data] => Array
(
[0] => 1
)
)
[1] => Array
(
[label] => P1
[backgroundColor] => #84a4d4
[borderColor] => #84a4d4
[borderWidth] => 1
[maxBarThickness] => 50
[data] => Array
(
[0] => 1
[1] => 1
[2] => 7
)
)
[2] => Array
(
[label] => P3
[backgroundColor] => #eb8d22
[borderColor] => #eb8d22
[borderWidth] => 1
[maxBarThickness] => 50
[data] => Array
(
[0] => 1
[1] => 4
)
)
[3] => Array
(
[label] => P2
[backgroundColor] => #FBCEB1
[borderColor] => #FBCEB1
[borderWidth] => 1
[maxBarThickness] => 50
[data] => Array
(
[0] => 3
)
)
[4] => Array
(
[label] => P4
[backgroundColor] => #7FFFD4
[borderColor] => #7FFFD4
[borderWidth] => 1
[maxBarThickness] => 50
[data] => Array
(
[0] => 3
)
)
)
)
But the data gets scrambled when it is plotted to Chart. The data gets arranged like this
This is the real data and how the graph should look like
Here is my code
function chart(){
$ar= RNCPHP\AnalyticsReport::fetch('Open tickets Ageing by priority');
$arr= $ar->run(0, $filters);
$chartInit = array();
$chartArr['data'] = array();
// push the report data into an array
for ( $ii = $arr->count(); $ii--; ) {
$row = $arr->next();
if($row['Severity'] == null || $row['Severity'] == "") {
$row['Severity'] = "No Value";
}
$row['Sort'] = $row['Sort'];
array_push($chartInit, $row);
}
echo "<pre>";
print_r($chartInit);
array_multisort(array_map(function($element) {
return $element['Sort'];
}, $chartInit), SORT_DESC, $chartInit);
$chartDataArr = array();
$sevArr = array();
foreach($chartInit as $k => $v) {
if(!isset($chartDataArr[$v['Weeks']])) {
$chartDataArr[$v['Weeks']] = array();
}
array_push($chartDataArr[$v['Weeks']], $v);
if(!in_array($v['Severity'], $sevArr)) {
array_push($sevArr, $v['Severity']);
}
}
$mapLabels = array();
$parsedAry = array();
$parsedAry['labels'] = array();
$parsedAry['datasets'] = array();
for($i = 0; $i < count($sevArr); $i++) {
$parsedAry['datasets'][$i] = array();
$parsedAry['datasets'][$i]['label'] = $sevArr[$i];
$parsedAry['datasets'][$i]['backgroundColor'] = $this->getColor($i);
$parsedAry['datasets'][$i]['borderColor'] = $this->getColor($i);
$parsedAry['datasets'][$i]['borderWidth'] = 1;
$parsedAry['datasets'][$i]['maxBarThickness'] = 50;
$parsedAry['datasets'][$i]['data'] = array();
}
foreach($chartDataArr as $k => $v) {
array_push($parsedAry['labels'], $k);
foreach($v as $k1 => $v1) {
$keySev = "";
foreach($parsedAry['datasets'] as $k2 => $v2) {
if($v2['label'] == $v1['Severity']) {
$keySev = $k2;
}
}
if($v1['Count'] == null || $v1['Count'] == "") {
$v1['Count'] = 0;
}
array_push($parsedAry['datasets'][$keySev]['data'], $v1['Count']);
}
}
echo "<pre>";
print_r($parsedAry);
echo "</pre>";
$chartArr['data'] = $parsedAry;
return $chartArr;
}
In my view page i'm displaying data with ChartJS Function
<canvas id="chart6"></canvas>
<script>
var ctx = document.getElementById('chart6').getContext('2d');
var data = <?php echo $data ?>;
var drawChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
},
title: {
display: true,
text: 'Open tickets Ageing by priority'
}
}
});
</script>
Please Help.

Answer 1

Your code has several problems.
First, your datasets should has data in numbers of labels so you can't ignore empty places without filling them. To fix this problem you need to change
$parsedAry['datasets'][$i]['data'] = array(); to $parsedAry['datasets'][$i]['data'] = array(0, 0, 0, 0, 0);
This will add 5 empty spot in your datasets.
Second you have to put numbers in right places for this one you have to add a counter for your last loop to identify right places.
Finally your code should look like this.
function chart()
{
$ar = RNCPHP\AnalyticsReport::fetch('Open tickets Ageing by priority');
$arr = $ar->run(0, $filters);
$chartInit = array();
$chartArr['data'] = array();
// push the report data into an array
for ($ii = $arr->count(); $ii--;) {
$row = $arr->next();
if ($row['Severity'] == null || $row['Severity'] == "") {
$row['Severity'] = "No Value";
}
$row['Sort'] = $row['Sort'];
array_push($chartInit, $row);
}
echo "<pre>";
print_r($chartInit);
array_multisort(array_map(function ($element) {
return $element['Sort'];
}, $chartInit), SORT_DESC, $chartInit);
$chartDataArr = array();
$sevArr = array();
foreach ($chartInit as $k => $v) {
if (!isset($chartDataArr[$v['Weeks']])) {
$chartDataArr[$v['Weeks']] = array();
}
array_push($chartDataArr[$v['Weeks']], $v);
if (!in_array($v['Severity'], $sevArr)) {
array_push($sevArr, $v['Severity']);
}
}
$mapLabels = array();
$parsedAry = array();
$parsedAry['labels'] = array();
$parsedAry['datasets'] = array();
for ($i = 0; $i < count($sevArr); $i++) {
$parsedAry['datasets'][$i] = array();
$parsedAry['datasets'][$i]['label'] = $sevArr[$i];
$parsedAry['datasets'][$i]['backgroundColor'] = $this->getColor($i);
$parsedAry['datasets'][$i]['borderColor'] = $this->getColor($i);
$parsedAry['datasets'][$i]['borderWidth'] = 1;
$parsedAry['datasets'][$i]['maxBarThickness'] = 50;
$parsedAry['datasets'][$i]['data'] = array(0, 0, 0, 0, 0);
}
$labelsNo = 0;
foreach ($chartDataArr as $k => $v) {
array_push($parsedAry['labels'], $k);
foreach ($v as $k1 => $v1) {
$keySev = "";
foreach ($parsedAry['datasets'] as $k2 => $v2) {
if ($v2['label'] == $v1['Severity']) {
$keySev = $k2;
}
}
if ($v1['Count'] == null || $v1['Count'] == "") {
$v1['Count'] = 0;
}
$parsedAry['datasets'][$keySev]['data'][$labelsNo] = $v1['Count'];
}
$labelsNo++;
}
echo "<pre>";
print_r($parsedAry);
echo "</pre>";
$chartArr['data'] = $parsedAry;
return $chartArr;
}