examples/charts/Gauge.js

   1 Ext.require(['Ext.chart.*', 'Ext.chart.axis.Gauge', 'Ext.chart.series.*', 'Ext.Window']);
   2
   3 Ext.onReady(function () {
   4
   5     Ext.create('Ext.Window', {
   6         width: 800,
   7         height: 250,
   8         minWidth: 650,
   9         minHeight: 225,
  10         title: 'Gauge Charts',
  11         tbar: [{
  12             text: 'Reload Data',
  13             handler: function() {
  14                 store1.loadData(generateData(1));
  15                 store3.loadData(generateData(1));
  16                 store4.loadData(generateData(1));
  17             }
  18         }],
  19         layout: {
  20             type: 'hbox',
  21             align: 'stretch'
  22         },
  23         items: [{
  24             xtype: 'chart',
  25             style: 'background:#fff',
  26             animate: {
  27                 easing: 'elasticIn',
  28                 duration: 1000
  29             },
  30             store: store1,
  31             insetPadding: 25,
  32             flex: 1,
  33             axes: [{
  34                 type: 'gauge',
  35                 position: 'gauge',
  36                 minimum: 0,
  37                 maximum: 100,
  38                 steps: 10,
  39                 margin: -10
  40             }],
  41             series: [{
  42                 type: 'gauge',
  43                 field: 'data1',
  44                 donut: false,
  45                 colorSet: ['#F49D10', '#ddd']
  46             }]
  47         }, {
  48             xtype: 'chart',
  49             style: 'background:#fff',
  50             animate: true,
  51             store: store3,
  52             insetPadding: 25,
  53             flex: 1,
  54             axes: [{
  55                 type: 'gauge',
  56                 position: 'gauge',
  57                 minimum: 0,
  58                 maximum: 100,
  59                 steps: 10,
  60                 margin: 7
  61             }],
  62             series: [{
  63                 type: 'gauge',
  64                 field: 'data1',
  65                 donut: 30,
  66                 colorSet: ['#82B525', '#ddd']
  67             }]
  68         }, {
  69             xtype: 'chart',
  70             style: 'background:#fff',
  71             animate: {
  72                 easing: 'bounceOut',
  73                 duration: 500
  74             },
  75             store: store4,
  76             insetPadding: 25,
  77             flex: 1,
  78             axes: [{
  79                 type: 'gauge',
  80                 position: 'gauge',
  81                 minimum: 0,
  82                 maximum: 100,
  83                 steps: 10,
  84                 margin: 7
  85             }],
  86             series: [{
  87                 type: 'gauge',
  88                 field: 'data1',
  89                 donut: 80,
  90                 colorSet: ['#3AA8CB', '#ddd']
  91             }]
  92         }]
  93     }).show();
  94
  95 });