Chart.js - Getting data from database using mysql and php

Question

I\'m trying to convert the static data to using database results. I\'ll be using MySQL and PHP.

Example Code:

Answer 1

Please place your php code into another file called api.php and use $.ajax to get these data with JSON format. To convert data into JSON format data you should use json_encode() php function.

I have set sample example you can see here.

Please refer below code example:

1. api.php

   $arrLabels = array("January","February","March","April","May","June","July");
   $arrDatasets = array('label' => "My First dataset",'fillColor' => "rgba(220,220,220,0.2)", 'strokeColor' => "rgba(220,220,220,1)", 'pointColor' => "rgba(220,220,220,1)", 'pointStrokeColor' => "#fff", 'pointHighlightFill' => "#fff", 'pointHighlightStroke' => "rgba(220,220,220,1)", 'data' => array('28', '48', '40', '19', '86', '27', '90'));
   
   $arrReturn = array(array('labels' => $arrLabels, 'datasets' => $arrDatasets));
   
   print (json_encode($arrReturn));
   

2. example.html

   $.ajax({
   type: 'POST',
   url: 'api.php',
   success: function (data) {
   lineChartData = data;//alert(JSON.stringify(data));
   var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
   
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myLine = new Chart(ctx).Line(lineChartData, {responsive: true});
   } 
   });
   

Please note that you should pass value of randomScalingFactor() at api.php.

Please check and let me know if you require any further help.