John Davidson

Message:

I would like to filter my chart by month so I made a <select> input above it. The chart is showing properly but when I changed the month options, the data is not updating based on the value selected. Here's what I've done so far:

index.php

<div class="row form-group">

  <select class="form-control col-lg-4" name="month">

   <option selected="selected" style="display:none"><?php echo date("F");?></option>

   <option value="9">September</option>

   <option value="10">October</option>

  </select>

</div> 

<canvas id="chart"></canvas>



<script>

  window.onload = function() {

  $.ajax({

  type: 'POST',

  url: 'data.php ',

  datatype: 'json',

                

  success: function (result) {

    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 }]

      }

     }

    })

   }

  })};

 </script>

data.php

<?php

$conn = mysqli_connect("localhost","root","","production");



$month = '';



if(isset($_POST["month"]))  

    {  

    $month = $_POST["month"];  

      }  else {  

    $month = date('m');  

    }  



$query = "SELECT finish_date,

        SUM(CASE WHEN customer_type = 'customer_A' THEN order_qty ELSE 0 END) AS custom_A,

        SUM(CASE WHEN customer_type = 'customer_B' THEN order_qty ELSE 0 END) AS custom_B,

        SUM(CASE WHEN customer_type = 'customer_C' THEN order_qty ELSE 0 END) AS custom_C

            FROM production WHERE MONTH(finish_date) = ".$month." GROUP BY finish_date ORDER BY finish_date ASC";



if ($stmt = $conn->prepare($query)) {

    $stmt->execute();

    $stmt->bind_result($date, $custom_A, $custom_B, $custom_C);            



    $labels = array();

    $data_A = array();

    $data_B = array();

    $data_C = array();



    while ($stmt->fetch()) {

        $labels[] = $date;

        $data_A[] = $custom_A;

        $data_B[] = $custom_B;

        $data_C[] = $custom_C;

    }

        $stmt->close();

}



$datasets_A = array('label'=>"A",'data'=> $data_A,'backgroundColor'=>"#D6E9C6");

$datasets_B = array('label'=>"B",'data'=> $data_B,'backgroundColor'=>"#FAEBCC");

$datasets_C = array('label'=>"C",'data'=> $data_C,'backgroundColor'=>"#EBCCD1");



$data = array('labels'=>$labels, 'datasets'=> array($datasets_A,$datasets_B,$datasets_C));



echo json_encode($data);



?>

How can I make it work? I must have miss something but not sure what it is since I'm not getting any error message.

---

My Answer:
It looks like you are missing the part where you actually send the selected month value to your data.php file using AJAX. You need to add the selected month value to your AJAX request data. Here's how you can modify your script to include the selected month value:

javascript
window.onload = function() {
$('select[name="month"]').change(function() {
var selectedMonth = $(this).val();

$.ajax({
type: 'POST',
url: 'data.php',
data: { month: selectedMonth },
dataType: 'json',
success: function(result) {
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 }]
}
}
});
}
});
});
};


With this modification, whenever the user selects a different month from the dropdown, the selected month value will be sent to your data.php file, and the chart will be updated with the data for the selected month.