Как я могу перезагрузить данные из chartjs после изменения файла JSON в HTTP POST

Question

Моя веб-страница хочет отобразить некоторые данные из базы данных в диаграмме.Я использую chartjs для рисования графика.Сценарий php используется для создания файла json, который будет использоваться для построения диаграммы.

Я хочу реализовать фильтр, который будет выбирать некоторые конкретные данные в соответствии с пользовательским вводом.Входные данные будут переданы в скрипт php с помощью HTTP Post.Файл json, созданный после, в порядке, но я не знаю, как обновить диаграмму на основе нового файла json.

<script>  
      $(document).ready(function(){  
           $('#filter').click(function(){  
                var from_date = $('#from_date').val();  
                var to_date = $('#to_date').val();  
                if(from_date != '' && to_date != '')  
                {                       
                      $.post("data.php", {
                      from_date: from_date
                      }, function(data,status) {
                      $("data").html(data);
                      });    
                }  

                else  
                {  
                     alert("Please Select Date");  
                }  
           });  
      });  
 </script> 

PHP-скрипт выглядит так:

if(isset($_POST["from_date"]))
{
$from = $_POST["from_date"];
$query = sprintf("SELECT * FROM Temperature 
                    WHERE Temperature > '".$from."'
                ");
}
else
{
    $query = sprintf("SELECT * FROM Temperature 
                ");
}
$result = $mysqli->query($query);

$data = array();
foreach ($result as $row) {
  $data[] = $row;
}
$result->close();
$mysqli->close();
print json_encode($data);

Иjs-файл:

$(document).ready(function(){
  $.ajax({
    url: "http://localhost/chartjs/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var timestamp = [];
      var temperature  = [];
      var humidity = [];
      var pressure = [];

      for(var i in data) {
        timestamp.push(data[i].TimeStp);
        temperature.push(data[i].Temperature);
        humidity.push(data[i].Humidity);
        pressure.push(data[i].Pressure);
      }

      var chartdata = {
        labels: timestamp,
        datasets : [
          {
            label: 'temperature',
            yAxisID: 'temperature',
            borderColor: 'rgba(120, 20, 60, 0.75)',
            hoverBackgroundColor: 'rgba(220, 20, 60, 1)',
            hoverBorderColor: 'rgba(220, 20, 60, 1)',
            data: temperature
          },
          {
            label: 'humidity',
            yAxisID: 'humidity',
            borderColor: 'rgba(255, 20, 60, 0.75)',
            hoverBackgroundColor: 'rgba(255, 20, 60, 1)',
            hoverBorderColor: 'rgba(255, 20, 60, 1)',
            data: humidity,
          }
        ]
      };



      var ctx = $("#mycanvas");

      var barGraph1 = new Chart(ctx, {
        type: 'line',
        data: chartdata,
        options: {
          showLines: true,
        scales: {
            xAxes:[{
               scaleLabel: {
                    display: true,
                    labelString: 'TimeStamp'
                    }

            }],
            yAxes: [{
                id: 'temperature',
                position:'left',
                scaleLabel: {
                    display: true,
                    labelString: 'Temperature[C]'
                    },
                ticks: {
                    beginAtZero:false
                }

              },

              {
                id: 'humidity',
                position:'right',
                scaleLabel: {
                    display: true,
                    labelString: 'Humidity[%]'
                    },
                ticks: {
                    beginAtZero:false
                }
              }]
        }
      }
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

json-файл генерируется нормально в HTTP POST, но я не знаю, как перерисовать диаграмму на основе этого фильтра.

Большое спасибо!

Answer 1

Вы можете создать функцию, которая будет принимать данные. Просто передайте данные, которые вы получите из POST-запроса, и chart.update() сделает волшебство. Обязательно передайте ссылку на диаграмму в переменной chart.

    function addData(chart, label, data) {
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(data);
        });
        chart.update();
    }