CODEWITHSUNDEEP
javascriptphpmysqlchart.js
Arcane
Arcane

Reputation: 699

Connecting Chart.js to MySQL database

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.

Upvotes: 3

Views: 12940

Answers (1)

rtome
rtome

Reputation: 1993

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.

Upvotes: 3

Related Questions