title: Update chartistjs with new data?
body: <p>I can reanimate the chart using a <code>setTimeout</code> (at the bottom, on the created event) by using <code>chart.update.bind(chart)</code>.</p>
  
  <p>Can anyone suggest a way I can pass new data into that chart object? Maybe with a prototype method? Or Should I just create a whole new chart object and redraw it?</p>
  
  <p>Ultimately I just want a chart that changes data automatically with a nice animation, primarily for aesthetic purposes. </p>
  
  <pre><code>var chart = new Chartist.Line('.ct-chart-main', {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
    series: [
      [1, 4, 5, 12, 4, 3, 2, 4, 5, 1]
    ]
  }, {
    low: 0,
    showArea: true,
    fullWidth: true,
    width: '600px',
    height: '250px',
    lineSmooth: Chartist.Interpolation.cardinal({
      tension: 1
    })
  });
  
  chart.on('created', function() {
    if(window.__exampleAnimateTimeout) {
      clearTimeout(window.__exampleAnimateTimeout);
      window.__exampleAnimateTimeout = null;
    }
    window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 5000);
  });
  
  chart.on('draw', function(data) {
      if(data.type === 'point') {
          var circle = new Chartist.Svg('circle', {
        cx: [data.x], cy:[data.y], r:[5],
      }, 'ct-circle');
      data.element.replace(circle);
      }
    if(data.type === 'line' || data.type === 'area') {
  
      data.element.animate({
        d: {
          begin: 2000 * data.index,
          dur: 1000,
          from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
          to: data.path.clone().stringify(),
          easing: Chartist.Svg.Easing.easeOutQuint
        }
      });
    }
  });
  
  chart.on('created', function() {
    if(window.__exampleAnimateTimeout) {
      clearTimeout(window.__exampleAnimateTimeout);
      window.__exampleAnimateTimeout = null;
    }
    window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 5000);
  });
  </code></pre>