Displaying remote data with a pie chart

This recipe teaches you how to create a pie chart that displays remote data. Movie sales information for a fictitious movie rental company will be retrieved from a database and made available to the chart by a server page. Each slice of the pie represents the sales amount for a given movie category, 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 salesStore = new Ext.data.JsonStore({
   url: 'chart-pie-remote.php',
   root: 'sales',
   fields: ['category', 'total_sales'],
   autoLoad: true
   });
   

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

   var pnl = new Ext.Panel({
   title: 'Movie Sales By Categories',
   renderTo: Ext.getBody(),
   width: 500,
   height: 500,
   layout: 'fit',
   items: {
   xtype: 'piechart',
   store: salesStore,
   categoryField: 'category',
   dataField: 'total_sales',
   extraStyle:
   {
   legend...