title: Updating chart.js bar graph in real time
body: <p>I am using <code>Chart.js</code> to create a simple bar chart with only two rows and 2 sets of data. I am new to using the library and after reading the examples, I feel comfortable with most of the things there. Here is what I have so far</p>
  
  <p><strong>JS code for graph:</strong></p>
  
  <pre><code>var helpers = Chart.helpers;
  var canvas = document.getElementById('bar');
  
  
  var barChartData = {
      labels: ["IBM", "Microsoft"],
      datasets: [{
        label: "Product A",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
  
        data: [25, 75]
      }, {
        label: "Product B",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
  
        data: [75, 25]
      }]
  
    }
    // 
  var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
    tooltipTemplate: "&lt;%if (label){%&gt;&lt;%=label%&gt;: &lt;%}%&gt;&lt;%= value %&gt;kb",
    animation: false,
  })
  
  ;
  </code></pre>
  
  <p>Now, I was wondering if it is possible to update this graph if the data was changed in real time without refreshing the page. For instance if every second the data values keep swapping or something random happens the graph should reflect the changes. I have searched a lot but not found proper document or tutorial explaining this and I would highly appreciate it if someone can show me how to do this. </p>
  
  <p>This is the <a href="http://jsfiddle.net/z10n2vty/" rel="noreferrer">FIDDLE</a> I have created for work so far.</p>