Setting up a column chart to display data retrieved from the server

In this recipe, you'll see how a column chart is set up to display data that has been downloaded from the server. As seen in previous chart recipes, the chart will display income-by-month figures for a fictitious movie rental company. A server page will retrieve this information from a database and make it available to the chart, 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. Define the data store:

   Ext.onReady(function() {
   var rentalsStore = new Ext.data.JsonStore({
   url: 'chart-line-remote.php',
   root: 'rentals',
   fields: ['month', 'payments'],
   autoLoad: true
   });
   

3. 3. Create a panel that will contain your chart and define it within the panel:

   var pnl = new Ext.Panel({
   title: 'Movie Rentals',
   renderTo: Ext.getBody(),
   width: 500,
   height: 300,
   layout: 'fit',
   items: {
   xtype: 'columnchart',
   store: rentalsStore,
   xField: 'month',
   yField...