title: Chart.js dynamic updates with data from database
body: <p>New to SOF and Chart.js. Working with this line chart code: [Link][1]
  linegraph.js pulls that data and adds the data to the chart.</p>
  
  <p>I have tried setting up a setInterval function to dynamically update the "event" values on my graph. The graph is rendered and the initial event values added. But I am getting an error when setInterval runs to update the event data: "Uncaught TypeError: Cannot read property '9' of undefined" (line 43 - 10 items in my array)</p>
  
  <p>Im not sure if I am declaring the function correctly to grab all of the values from my array, then update the graph. Please help!</p>
  
  <p>Updated Code v2:</p>
  
  <pre><code>  $(document).ready(function(){
     $.ajax({
      url: "http://localhost/data.php",
      method: "GET",
      success: function(data) {
          console.log(data);
          var source = [];
          var event = [];
  
          for(var i in data) {
              source.push("Source" + data[i].source);
              event.push(data[i].events);
          }
  
          var chartdata = {
              labels: source,
              datasets : [
                  {
                      label: 'events',
                      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: event
                  }
              ]
          };
  
          var ctx = $("#mycanvas");
  
          var barGraph = new Chart(ctx, {
              type: 'bar',
              data: chartdata
          });
  
  
          var updateChart = function() {
            $.getJSON("data.php", function(data) {
          barGraph.destroy();                           &lt;--------- Issue 
               for(var i in data) {
              source.push("Source" + data[i].source);
              event.push(data[i].events);
              }
          barGraph.update();
  
             }); 
          }         
  
          setInterval(function(){updateChart();},3000);
      },
      error: function(data) {
          console.log(data);
      }
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>New Code Update 4.17</p>
  
  <pre><code>     &lt;div id="chart-container" style="width:40%"&gt;
                                  &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;
                              &lt;/div&gt;
  
              &lt;script&gt; 
              var randomScalingFactor = function() {
                                      return Math.round(Math.random() * 100);
                                  };
  
  
              // create initial chart
                  var ctx_live = document.getElementById("mycanvas");
                  var myChart = new Chart(ctx_live, {
                    type: 'doughnut',
                    data: {
                      labels: ['BPM','REMAIN'],
                      datasets: [{
                        data: [80,20],
                        borderWidth: 1,
                        backgroundColor:['#FF6384','#ffffff'],
                        label: 'BPMs',
                      }]
                    },
                    options: {
                      responsive: true,
                      title: {
                        display: true,
                        text: "Chart.js - Dynamically Update Chart Via Ajax Requests",
                      },
                      legend: {
                        display: false
                      },
  
                    }
                  });
  
                  // logic to get new data
                  var getData = function() {
                    $.ajax({
                      url: 'http://localhost/data.php',
                      success: function(data) {
                        // process your data to pull out what you plan to use to update the chart
                        console.log(data);
                              var bpms = [];
                              var remain = [];
                              for(var i in data) {
                                  bpms.push(data[i].bpm);
                                  remain.push(data[i].left);
                              }
                        // e.g. new label and a new data point
  
                        // add new label and data point to chart's underlying data structures
  
                      // myChart.data.labels.push("BPM");
                      // myChart.data.labels.push("REMAIN"); 
                      // myChart.data.datasets[0].data.push([bpms]);
                      //myChart.data.datasets[0].data.push([remain]);
  
  
                                     myChart.data.datasets.forEach(function(dataset) {
                                              dataset.data = dataset.data.map(function() {
                                                  return randomScalingFactor();       &lt;-------------------------------------- Issue Here
  
                                              });
  
  
                                          });
  
                        myChart.update();
  
                      }
                    });
                  };
  
  
                  // get new data every 3 seconds
                  setInterval(getData, 3000);
  
              &lt;/script&gt;
  </code></pre>