Graf k aktualizaci z rozbalovací nabídky

Můžete použít addData a removeData , viz https://www.chartjs.org/docs/latest/developers /updates.html . addData přidá pouze jednu datovou sadu na volání, ale removeData odstraní všechny datové sady z grafu. Existuje také způsob, jak vložit štítek a datovou sadu, viz ukázka codepen:https://codepen.io/jordanwillis/ pero/bqaGRR .

Nejprve musíte uložit graf do proměnné, abyste mohli snadno přidávat a odebírat data. když máte graf uložený ve var, řekněme myChart , můžete zavolat removeData() jako:myChart.removeData() . Pro přidání dat musíte odeslat štítek a data jako:myChart.addData('news', [2, 32, 3]) .

Myšlenka je další, aktualizovat graf, když je váš hovor ajax úspěšný. Důležité je mít instanci grafu ve stejném souboru, kde máte volání ajax, měli byste přesunout volání onclick do souboru js nebo volat funkci z àpp.js .

Nyní záleží na vaší datové struktuře, budete muset projít každou a získat hodnotu a štítek. Z dat musíte získat stejný výsledek jako při vytváření grafu.

UKÁZKA KÓDU:

Co budete mít v 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(); 
    }
});

Poté bargraph.html se také změní:

<script type="text/javascript">

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

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