Gráfico para actualizar desde una selección desplegable

Puedes usar addData y removeData , consulte https://www.chartjs.org/docs/latest/developers /actualizaciones.html . addData agrega solo un conjunto de datos por llamada, pero removeData elimina todos los conjuntos de datos del gráfico. También hay una forma de insertar la etiqueta y el conjunto de datos; consulte la muestra de codepen:https://codepen.io/jordanwillis/ bolígrafo/bqaGRR .

Primero, lo que necesita es guardar su gráfico en variable, para que pueda agregar y eliminar datos fácilmente. cuando tenga un gráfico guardado en var, digamos myChart , puede llamar a removeData() como:myChart.removeData() . Para agregar datos, debe enviar una etiqueta y datos como:myChart.addData('news', [2, 32, 3]) .

La idea es la siguiente, actualizar el gráfico cuando su llamada ajax sea exitosa. Lo importante es tener una instancia de gráfico en el mismo archivo donde tiene una llamada ajax, debe mover la llamada onclick al archivo js o llamar a la función desde àpp.js .

Ahora depende de su estructura de datos, deberá revisar cada uno y obtener el valor y la etiqueta. Tienes que obtener el mismo resultado de los datos que tienes cuando estás creando un gráfico.

EJEMPLO DE CÓDIGO:

Lo que tendrás en 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(); 
    }
});

Entonces usted bargraph.html también se cambiará:

<script type="text/javascript">

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

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