Chart.Js - Getting Data from Database Using MySQL and PHP

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

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.

How to draw a line graph with data in MySQL using chart Js in php

As mentioned in an answer the problem was in encoding. In fact the array that should be passed should be in the var xValues = [1,2,3,4,5,6] format. But what I got was in var xValues = [{1},{2},{3},{4},{5},{6}] format. Anyhow I will post my whole code if in case will be needed for someone in the future. Thank you very much for those who tried to help me.

The full code is as follows

$con = new mysqli($servername, $username, $password, $db);
// getting date column from Table_attendance table 
$myquery1 = "select date from Table_attendance";
     $query1 = mysqli_query($con, $myquery1);
 
  if ( ! $query1 ) {
    echo mysqli_error();
    die;
  }
  $a1 ="";
  for ($x = 0; $x < mysqli_num_rows($query1); $x++) {
  $data1 = mysqli_fetch_assoc($query1);
   if($a1 != ""){
      $a1 = $a1.",'".$data1['date']."'"; 
   }
else {
    $a1 = "'".$data1['date']."'";
}
}

// getting attendance column from Table_attendance table 
 $my1 = "select attendance from Table_attendance";
 $qu1 = mysqli_query($con, $my1);
 
  if ( ! $qu1 ) {
    echo mysqli_error();
    die;
  }
  $a2 ="";
  for ($x = 0; $x < mysqli_num_rows($qu1); $x++) {
  $data2 = mysqli_fetch_assoc($qu1);
     if($a2 != ""){
      $a2 = $a2.",".$data2['attendance']; 
   }
else {
    $a2 = $data2['attendance'];
}
}

?>
<?php //ploting the graph  ?>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>

var xValues = <?php echo '['.$a1.']'; ?>;
var yValues = <?php echo '['.$a2.']'; ?>;

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  },
  options: {
    title: {display: true, text: 'Total attendance'},
    legend: {display: false},
    
                
                
                    
    scales: {
      yAxes: [{ticks: {min: 10, max:100}}],
    }
  }
});
</script>

Plot dataset from MySQL with Chart.js and PHP

You've defined $output as a variable in PHP and are trying to use it in JavaScript. That won't work. Try adding this in your JavaScript:

var object = <?php echo json_encode($object); ?>;

Display php array data in chart.js javascript

You need to supply the labels and data separately. You could create two variables in your loop for this:

$chatLabels = []; 
$chatData = [];
while ($userchat= mysqli_fetch_array($rscht)) {
      $chatLabels[] = $userchat['name'];
      $chatData[] = $userchat['times'];
}
$chatLabelsJson = json_encode($chatLabels); // ["John Mark","Sandra Friday","Kelvin Russel"]
$chatDataJson = json_encode($chatData); //["25","12","4"]

Alternatively you could use array_column to pull out the data from your existing $chatstack array:

$chatLabels = array_column($chatstack, 'label');
$chatData = array_column($chatstack, 'value');
$chatLabelsJson = json_encode($chatLabels); // ["John Mark","Sandra Friday","Kelvin Russel"]
$chatDataJson = json_encode($chatData); //["25","12","4"]

Chart.js PHP Database data is not displayed

Use jQuery for your document and make sur to pass $ in the callback.

  jQuery(document).ready(function($) {
      // Your code here
  });

---

Related Topics