Graphique à mettre à jour à partir d'une sélection déroulante

Vous pouvez utiliser addData et removeData , voir https://www.chartjs.org/docs/latest/developers /mises à jour.html . addData ajoute un seul jeu de données par appel, mais removeData supprime tous les ensembles de données du graphique. Il existe également un moyen de pousser l'étiquette et l'ensemble de données, voir l'exemple de codepen :https://codepen.io/jordanwillis/ stylo/bqaGRR .

Tout d'abord, vous devez enregistrer votre graphique dans une variable afin de pouvoir facilement ajouter et supprimer des données. lorsque vous avez un graphique enregistré dans var, disons myChart , vous pouvez appeler removeData() comme :myChart.removeData() . Pour ajouter des données, vous devez envoyer une étiquette et des données telles que :myChart.addData('news', [2, 32, 3]) .

L'idée est ensuite de mettre à jour le graphique lorsque votre appel ajax est un succès. L'important est d'avoir une instance de graphique dans le même fichier où vous avez un appel ajax, vous devez déplacer l'appel onclick vers le fichier js, ou appeler la fonction depuis àpp.js .

Cela dépend maintenant de votre structure de données, vous devrez passer par chacun et obtenir la valeur et l'étiquette. Vous devez obtenir le même résultat à partir des données que vous avez lorsque vous créez un graphique.

EXEMPLE DE CODE :

Ce que vous aurez dans 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(); 
    }
});

Ensuite, vous bargraph.html seront également modifiés :

<script type="text/javascript">

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

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