Connecting Chart.js to MySQL database
If you have your data in a php array and your labels in another php array then you can just use the json_encode function to pass your data to chartjs.
With your $this->list_excercise you could do this :
<?php
$data = array();
$label = array();
foreach ($this->list_excercise as $value) :
$data[] = $value['data'];
$label[] = $value['label'];
endforeach;
?>
and then in your view/template :
var barChartData = {
labels : <?php echo json_encode($label) ?>,
datasets : [
{
fillColor : "rgba(23, 158, 3, 0.8)",
strokeColor : "rgba(24, 107, 2, 0.8)",
highlightFill: "rgba(24, 107, 2, 0.9)",
highlightStroke: "rgba(24, 107, 2, 1)",
data : <?php echo json_encode($data) ?>
}
]
}
I haven't run the code, but the idea is there as a snippet.
See if that helps.
Arcane
Updated on June 06, 2022Comments
-
Arcane almost 2 years
I have this script in my html document which creates a chart using Chart.js. The data in it are manualy inserted ( The labels and the data in datasets). The data in datasets are now randomly generated numbers. But I need to somehow connect it with my MySQL database.
<script> var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var barChartData = { labels : ["January","February","March","April","May","June","July","January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(23, 158, 3, 0.8)", strokeColor : "rgba(24, 107, 2, 0.8)", highlightFill: "rgba(24, 107, 2, 0.9)", highlightStroke: "rgba(24, 107, 2, 1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] } ] } window.onload = function(){ var ctx2 = document.getElementById("canvas2").getContext("2d"); ctx2.canvas.width = 1000; ctx2.canvas.height = 800; window.myBar = new Chart(ctx2).Bar(barChartData, { responsive : true }); }
I call select query in Model and then send the result to my View. And then in my View I can get to my data like this. I used a table as an example.
<?php foreach ($this->list_excercise as $value) : ?> <td><?= $value['data'] ?></td> <td><?= $value['label'] ?></td> <?php endforeach; ?>
So the data can be inserted into html like this, but how can I insert it into chart.js javascript? So instead of
labels: ["January", "February"]
I would have something like
labels: $array
I cannot figure out a simple way of getting the data to the script. Can anyone help me out with this? Thank you in advance.