examples/charts/GroupedBar.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
   3
   4 Ext.onReady(function () {
   5     var win = Ext.create('Ext.Window', {
   6         width: 800,
   7         height: 600,
   8         hidden: false,
   9         maximizable: true,
  10         title: 'Grouped Bar Chart',
  11         renderTo: Ext.getBody(),
  12         layout: 'fit',
  13         tbar: [{
  14             text: 'Reload Data',
  15             handler: function() {
  16                 store1.loadData(generateData());
  17             }
  18         }, {
  19             enableToggle: true,
  20             pressed: true,
  21             text: 'Animate',
  22             toggleHandler: function(btn, pressed) {
  23                 var chart = Ext.getCmp('chartCmp');
  24                 chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
  25             }
  26         }],
  27         items: {
  28             id: 'chartCmp',
  29             xtype: 'chart',
  30             style: 'background:#fff',
  31             animate: true,
  32             shadow: true,
  33             store: store1,
  34             legend: {
  35               position: 'right'
  36             },
  37             axes: [{
  38                 type: 'Numeric',
  39                 position: 'bottom',
  40                 fields: ['data1', 'data2', 'data3'],
  41                 minimum: 0,
  42                 label: {
  43                     renderer: Ext.util.Format.numberRenderer('0,0')
  44                 },
  45                 grid: true,
  46                 title: 'Number of Hits'
  47             }, {
  48                 type: 'Category',
  49                 position: 'left',
  50                 fields: ['name'],
  51                 title: 'Month of the Year'
  52             }],
  53             series: [{
  54                 type: 'bar',
  55                 axis: 'bottom',
  56                 xField: 'name',
  57                 yField: ['data1', 'data2', 'data3']
  58             }]
  59         }
  60     });
  61 });