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

This recipe explains how to set up a line chart to display remote data. As with the previous recipe, the information displayed will be income-by-month figures for a fictitious movie rental company. In this case, 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: 'linechart',
   store: rentalsStore,
   xField: 'month',
   yField: 'payments',
   yAxis: new Ext...