0

I want to update my chart dynamically using data from an AJAX call. The entire chart is in a for loop with the total length of the return value from the AJAX call. The reason for this is, is because I want to access certain data from my database in order to use that data in my chart (TimeStamps, Temperature, ...). This is my current code:

for (var i = 0; i < data.length; i++) {
   var ctx = $("#" + data[i].SensorID);
               switch(data[i].Settings){
                   case "Line":
                       var chartdata = {
                           labels: [],
                           datasets: [{
                             label: 'Sensor Temperatuur',
                             backgroundColor: 'rgba(200, 200, 200, 0.75)',
                             borderColor: 'rgba(200, 200, 200, 0.75)',
                             hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                             hoverBorderColor: 'rgba(200, 200, 200, 1)',
                             data: []
                           }]
                         };


                         var myChart = new Chart(ctx, {
                           type: 'line',
                           data: chartdata,
                           options: {
                             scales: {
                               yAxes: [{
                                 ticks: {
                                   beginAtZero: true
                                 }
                               }]
                             }
                           }
                         });

                         //Part where I want to UPDATE the chart using data from my database

                         myChart.chartdata.datasets.data[i] = data[i].Temperature;
                         myChart.chartdata.labels[i] = data[i].TimeStamp;
                         myChart.update();

                         break;
...
}

NOTE: The entire for loop is based in an Ajax success function. I want to use the returned data to create these charts. When I log the data it displays all the correct data, so that is not an issue.

Current issue: It says it cannot take chartdata from undefined, so it doesn't recognise my chart variable I created above.

What I want (currently): Updating the chart based upon the amount of rows there are with different data every 5 seconds or so.

Felix
  • 83
  • 2
  • 10
  • Define the chart outside the loop, then in the loop add / update the data. – Matt Clark Mar 16 '20 at 14:00
  • Yeah but I really need the for loop, because I basically create charts based upon the amount of sensors the users wants to display. – Felix Mar 16 '20 at 14:05
  • with the loop you want to create multiple charts and want to update them every 5 sec, take a look at [this](https://jsfiddle.net/WhiteHat/dmfgvn7u/1/) , its an example of live chart with chart js – Ahmed Sunny Mar 16 '20 at 15:04
  • This answer may help you finding a solution to your problem: https://stackoverflow.com/a/60375398/2358409 – uminder Mar 21 '20 at 10:00

0 Answers0