ड्रॉप डाउन चयन से अद्यतन करने के लिए चार्ट

आप addData . का उपयोग कर सकते हैं और removeData , देखें https://www.chartjs.org/docs/latest/developers /updates.html . addData प्रति कॉल केवल एक डेटासेट जोड़ता है, लेकिन removeData चार्ट से सभी डेटासेट हटा देता है। लेबल और डेटासेट को पुश करने का भी तरीका है कोडपेन नमूना देखें:https://codepen.io/jordanwillis/ पेन/बीक्यूएजीआरआर ।

सबसे पहले आपको अपने चार्ट को वेरिएबल में सहेजना है, ताकि आप आसानी से डेटा जोड़ और हटा सकें। जब आपने चार्ट को var में सहेजा है, तो मान लें कि myChart , आप removeData() . पर कॉल कर सकते हैं जैसे:myChart.removeData() . डेटा जोड़ने के लिए आपको लेबल और डेटा भेजना होगा जैसे:myChart.addData('news', [2, 32, 3]) ।

आपका अजाक्स कॉल सफल होने पर चार्ट को अपडेट करने का विचार अगला है। महत्वपूर्ण बात यह है कि चार्ट उदाहरण उसी फ़ाइल में होना चाहिए जहां आपके पास अजाक्स कॉल है, आपको ऑनक्लिक कॉल को जेएस फ़ाइल में ले जाना चाहिए, या àpp.js से फ़ंक्शन को कॉल करना चाहिए। ।

अब आपकी डेटा संरचना पर निर्भर करता है, आपको प्रत्येक के माध्यम से जाने और मूल्य और लेबल प्राप्त करने की आवश्यकता होगी। आपको डेटा से वैसा ही परिणाम प्राप्त करना होगा जैसा कि आप चार्ट बनाते समय करते हैं।

कोड नमूना:

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(); 
    }
});

फिर आप bargraph.html भी बदला जाएगा:

<script type="text/javascript">

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

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