Setting up a line chart to display local data

This recipe explains how to create a line chart that displays data stored in a local array. The array will contain income by month data for a fictitious movie rental company. The chart's X-axis will represent the time-scale (months), whereas the income information will be reflected on the Y-axis. This can be 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. 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 define the chart within the panel:

   var pnl = new Ext.Panel({
   title: 'Movie Rentals',
   renderTo: Ext...