[Chartjs]-Filter ChartJS using data from PHP

by

3👍

✅

You need to write change event so that whenever select-box is change the value will be send to your backend and the updated json data will send back as response which you will update in your chart .

Jquery code :

window.onload = function() {
  update(); //call your function to update chart
}
//onchange of select
$("select[name=month]").on("change", function() {
  var month = $(this).val() //get value of select
  update(month); //call to update
})

function update(month) {
  var value;
  //if null
  if (month == null) {
    value = "default"; //send some dummy data
  } else {
    value = month; //send actual month
  }
  $.ajax({
    type: 'POST',
    url: 'data.php ',
    data: {
      month: value //send value to backend
    },
    datatype: 'json',
    success: function(result) {
     //update chart datas
      var ctx = document.getElementById("chart").getContext("2d");
      var mychart = new Chart(ctx, {
        type: 'bar',
        data: JSON.parse(result),
        options: {
          scales: {
            xAxes: [{
              stacked: true
            }],
            yAxes: [{
              stacked: true
            }]
          }
        }
      })
    }
  })

}

And only change in php code you need to make is here :

if(isset($_POST["month"]) && $_POST["month"] != "default" ){  
    $month = $_POST["month"];  
 }  else {  
    $month = date('m');  
}

Leave a comment