Creating an auto-refreshing chart

Sometimes, it is desirable to have a chart that automatically refreshes its information. This recipe shows you how to implement periodic updates of a chart's data. The Crazy Stock Prices chart will display fictitious stock prices, as seen in the following screenshot:

The chart's data will refresh periodically without user intervention, as seen in the following screenshot:

How to do it...

1. 1. Set the URL to load the chart from:

   Ext.chart.Chart.CHART_URL = '../ext3/charts.swf';
   

2. 2. Create a function to generate dummy data:

   function generateData() {
   var data = [];
   var companies = ['MSFT','YHOO','GOOG','JAVA'];
   for (var i = 0; i < 4; ++i) {
   data.push([companies[i], (Math.floor(Math.random() * 11) + 1) * 10]);
   }
   return data;
   }
   

3. 3. Define a data store to feed the chart:

   var store = new Ext.data.ArrayStore({
   fields: ['stock', 'price'],
   data: generateData()
   });
   

4. 4. Create a function that will be called periodically to refresh the data:

   function refreshData() {
   store.loadData...