Bagan untuk diperbarui dari pilihan tarik-turun

Anda dapat menggunakan addData dan removeData , lihat https://www.chartjs.org/docs/latest/developers /updates.html . addData hanya menambahkan satu set data per panggilan, tetapi removeData menghapus semua kumpulan data dari bagan. Ada juga cara untuk mendorong label dan kumpulan data lihat contoh codepen:https://codepen.io/jordanwillis/ pena/bqaGRR .

Pertama yang Anda butuhkan adalah menyimpan grafik Anda dalam variabel, sehingga Anda dapat dengan mudah menambah dan menghapus data. ketika Anda memiliki bagan yang disimpan di var, katakanlah myChart , Anda dapat memanggil removeData() seperti:myChart.removeData() . Untuk menambahkan data Anda harus mengirim label dan data seperti:myChart.addData('news', [2, 32, 3]) .

Idenya selanjutnya, untuk memperbarui bagan ketika panggilan ajax Anda berhasil. Yang penting adalah memiliki contoh grafik di file yang sama di mana Anda memiliki panggilan ajax, Anda harus memindahkan panggilan onclick ke file js, atau memanggil fungsi dari dari àpp.js .

Sekarang tergantung pada struktur data Anda, Anda harus melalui masing-masing dan mendapatkan nilai dan label. Anda harus mendapatkan hasil yang sama dari data seperti yang Anda miliki saat membuat grafik.

CONTOH KODE:

Apa yang akan Anda miliki di app.js

$(document).ready(function(){

    $.ajax({
        url: "http://localhost/chartjs/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var op1 = [];
            var op2 = [];

            let data_keys = Object.keys(data[0])
            console.log(data_keys)
            first = data_keys[0] //1st element
            second = data_keys[1] //2nd element

            for(var i in data) {
                op1.push(data[i][first])
                op2.push(data[i][second])

            }

         var chartdata = {
         labels: op1,
         datasets : [
             {
             label: 'SystemID and Apparent Power (VA)',
             backgroundColor: 'rgba(250, 50, 50, 0.4)',
             borderColor: 'rgba(500, 50, 50, 0.5)',
             hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
             hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
             data: op2
         } 
         ]
  };

  var ctx = document.getElementById('mycanvas').getContext('2d');

  var barGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    options: {
    scales: {
       xAxes: [{
               ticks: {
                fontSize: 10
               }
              }],
        yAxes: [{
            ticks: {
                fontSize: 10
            }
        }]
            }
         }
      });
    },
    error: function(data) {
    console.log(data);
    }
    });

    function updateChartAjaxCall(data1, data2)
    {
        //ajax call here 
        $.ajax({
            type: 'POST',
            url: 'data.php',
            dataType: 'html',
            data: {data1:data1,data2:data2},
            success:function(data){ 
                // here also manipulate data what you get to update chart propertly
                myChart.removeData();
                myChart.addData('newLabel', [23, 33, 4]);
            }, 
            error:function (xhr, ajaxOptions, thrownError){
                console.log(thrownError);
            }, 
            complete: function(){
            }
        });
        e.preventDefault(); 
    }
});

Kemudian Anda bargraph.html juga akan diubah:

<script type="text/javascript">

$('#submitButton').click(function(e){
    var data1=$("#data1").val();
    var data2=$("#data2").val();

    updateChartAjaxCall(data1, data2);
});
</script>