web page doesn't display chart or any error - mysql

Question

I just started my adventure with chartsjs. I tried to modify all tutorials I found to suit my needs, but unfortunately the page doesn't display the chart and doesn't give any errors. Can anyone advice please.
$result='';
$sql="SELECT Q1.uUserName AS Technician, sum(if(Q2.dCatFK=1,1,0)) AS AM, sum(if(Q2.dCatFK=2,1,0)) as PM
FROM T_users as Q1 LEFT JOIN (SELECT dUser2FK, dCatFK FROM T_Defects
INNER JOIN T_settings WHERE (dDateClosed >= FYDateFROM AND dDateClosed <= FYDateTO)";
if (!empty($_SESSION['dept'])) { $sql .= ' AND dDeptFK = '.$_SESSION['dept'];}
if (!empty($_SESSION['area'])) { $sql .= ' AND dAreaFK = '.$_SESSION['area'];}
if (!empty($_SESSION['month'])){ $sql .= ' AND MONTH(dDateClosed) = '.$_SESSION['month'];}
$sql .=") as Q2 ON Q1.uPK = Q2.dUser2FK GROUP BY Q1.uUserName ORDER BY sum(if(dCatFK is not null,1,0)) DESC, Q1.uUsername;";
try{
$stmt = $con->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
$label = array();
$data = array();
foreach ($result as $row) {
$label[] = $row["Technician"];
$data[] = $row["AM"];
$data[] = $row['PM'];
}
} catch(PDOException $e){
echo 'ERROR: ' . $e->getMessage();
}
<canvas id="myChart_Fixed" width="1000" height="400"></canvas>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var ctx = document.getElementById("myChart_Fixed");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:<?=json_encode($label);?>,
datasets: [{
label: 'Fixed AM',
data:<?=json_encode(array_values($data[0]));?>,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Fixed PM',
data:<?=json_encode(array_values($data[1]));?>,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>

Answer 1

you're appending your $data with AM and PM data so there are no 2 datasets instead there is only one dataset. Because of that $data[1] doesn't exists. Declare another 2 arrays and insert there your data for AM and PM respectively, then insert $dataAM at $data[0]... Let the code speak for itself:
...PHP file
$data = array();
$dataAM = array();
$dataPM = array();
foreach ($result as $row) {
$label[] = $row["Technician"];
$dataAM[] = $row["AM"];
$dataPM[] .=$row['PM'];
}
$data[0] = $dataAM;
$data[1] = $dataPM;
...HTML File
data: {
labels:<?=json_encode($label);?>,
datasets: [{
label: 'Fixed AM',
data:<?=json_encode(array_values($data[0]));?>,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Fixed PM',
data:<?=json_encode(array_values($data[1]));?>,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}
]
},

Answer 2

Typo error, changed this:
json_encode(array_values($data[0]))
to this:
json_encode(array_values($data))