In this recipe, we will learn about the area chart provided by Sencha Touch. This creates a stacked area chart and is useful in displaying multiple aggregated layers of information.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
In all the chart-related recipes, we will be using the following store definition to feed the data to our charts:
var store = new Ext.data.JsonStore({ fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], data: [ {'name':'House Rent', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, {'name':'Books', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, {'name':'Petrol', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, {'name':'Grocery', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, {'name':'Loans & Deposits', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} ] });