Displaying local data with a pie chart

This recipe teaches you to create a pie chart that displays data stored in a local array. The data source used in this recipe is an array that contains movie sales information for a fictitious movie rental company. Each slice of the pie represents the amount of sales 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({
   fields: ['category', 'total_sales'],
   data: [
   { category: 'Action', total_sales: 4375.85 },
   { category: 'Sci-Fi', total_sales: 4756.98 },
   { category: 'Animation', total_sales: 4656.30 },
   { category: 'Drama', total_sales: 3722.54 },
   { category: 'Family', total_sales: 5226.07 }
   ]
   });
   

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...