Sencha Touch Cookbook

Creating a gauge chart

Gauge charts are used to show the progress in a certain variable. In this recipe, we will walk through the steps to create a gauge chart.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

How to do it...

Carry out the following steps:

1. Create and open a new file named ch07_07.js and paste the following code into it:

   Ext.setup({ onReady: function() { var store = new Ext.data.JsonStore(...); //defined in the Area Chart recipe var chart = new Ext.chart.Chart({ fullscreen: true, width: 500, height: 300, animate: true, store: store, axes: [{ type: 'gauge', position: 'gauge', minimum: 0, maximum: 100, steps: 10 }], series: [{ type: 'gauge', angleField: 'data1', colorSet: ...