In the example below we use the values from a database query, which are grouped by activity. This will return:
Soccer 11
Football 2
Hockey 7
(SELECT activity,count(activity) as count from sa_activities group by activity order by activity
The format for the data needs to be entered as a javascript array like below.
data: ['soccer','Football','Hockey'],
To do this in PHP we will need to push the query results PHP from the database into a separate php array
//create two empty arrays
$activities = [];
$counts = [];
if(mysqli_num_rows($dbResult) > 0){
while($row = mysqli_fetch_assoc($dbResult)){
array_push($activities, $row["activity"]);
array_push($counts, $row["count"]);
}
}
Go to the data object
Use php and echo out the array using the in built json_encode function - echo json_encode($sports);
data: {
labels: <?php echo json_encode($activities);?>,
datasets: [{
label: 'Concordia Activities Summary',
data: <?php echo json_encode($counts);?>,
Then we need to print the arrays into the javaScript code using a custom made function. This function can print strings and integers.
function writeArray($a,$type){
$output = "[";
for($i =0;$i<count($a);$i++){
if($type == "S"){ //type is a string
$output.= "'".$a[$i]."',";
}else if( $type == "I"){ // type is an int
$output.= $a[$i].",";
}
}
$output.="]";
echo $output;
}
Then we need to print/echo this output into the javascript labels and data sections:
Labels defines data set name
Data contains the number of the count
data: {
labels: <?php writeArray($activities,"S");?>, //Write the array as a string "S"
datasets: [{
label: 'Concordia Activities Summary',
data: <?php writeArray($counts,"I")?>, //write the array with numbers "I"
<?php
include('connect.php')
?>
<html>
<head>
<script src = "https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<style>
#layout {
width: 400px;
height: 400px;
}
</style>
<body>
<h1>Graph Example</h1>
<div id="layout">
<canvas id="myChart" width="500" height="500"></canvas>
</div>
</body>
</html>
<?php
//two empty arrays
$activities = [];
$counts = [];
//sql statement to get values from DB
$sql = "SELECT activity,count(activity) as count from sa_activities group by activity order by activity";
//run the query
$dbResult = mysqli_query($conn, $sql);
if(mysqli_num_rows($dbResult) > 0){
while($row = mysqli_fetch_assoc($dbResult)){
//add the value to the global arrays
array_push($activities, $row["activity"]);
array_push($counts, intval($row["count"]));
}
}
else{
echo "No result";
}
?>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar', //pie,line
data: {
labels: <?php echo json_encode($activities);?>, //Write the array from the
datasets: [{
label: 'Concordia Activities Summary',
data: <?php echo json_encode($counts);?>,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
title: {
display: true,
text: 'Concordia Sport Nominations'
}
},
scales: {
//set options for x axis
x:{
title: {
display: true,
text: 'School Activities' //label
}
},
//set options for y axis
y:{
title: {
display: true,
text: 'Count of Students Nominated' //label
}
},
}
}
});
</script>