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.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Carry out the following steps:
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: ['#F49D10', '#123456'] }], ...