title: Update Chart in Javascript using Chart.js
body: <p>I have been using 
  Chart.js <a href="http://www.chartjs.org/docs/#getting-started" rel="nofollow">Chart.js Documentation</a></p>
  
  <p>I have a graph showing multiple lines.
  The graph is of a changing drug concentration per unit time (s), I would like to run this graph in a variety of scenario's ie, realtime, x2, x4, x8, etc 
  So when the next second comes along I want the graph to update with the new calculated data and then REFRESH/update the chart.</p>
  
  <pre><code>//simDur is the duration i want the simulation to run for eg 1hr/3600secs
  for(t=0; t &lt; simDur; t++)
  {
      timer(); //function awaits here for the next second to arrive
      generateData(); //calculate the new data yArr;
      myLineChart.addData(yArr, t); //yArr is an array of Y values, t=time
      myLineChart.update();  //update the chart with the new added data
  }
  </code></pre>
  
  <p>the problem is the chart does not refresh until the finish of the for loop, I want the chart to display the updated data each second.</p>
  
  <p>The documentation says update() should do the following...</p>
  
  <p>Calling update() on your Chart instance will re-render the chart with any updated values, allowing you to edit the value of multiple existing points, then render those in one animated render loop.</p>