Setting up a column chart to display local data

Using a column chart to display local data is very simple. As seen previously in the How to set up a line chart to display local data recipe, the data source used in this recipe is an array that contains income-by-month information for a fictitious movie rental company. Similarly, the chart's X-axis will represent the time-scale (months); whereas income information will be reflected on the Y-axis, as shown 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. Define the data store:

   Ext.onReady(function() {
   var rentalsStore = new Ext.data.JsonStore({
   fields: ['month', 'payments'],
   data: [
   { month: 'May 2005', payments: 4824.43 },
   { month: 'June 2005', payments: 9631.88 },
   { month: 'July 2005', payments: 28373.89 },
   { month: 'August 2005', payments: 24072.13 },
   { month: 'September 2005', payments: 33475.55 }
   ]
   });
   

3. 3. Create a panel that will contain your chart and...