examples/charts/Column.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite']);
   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: 'Column Chart',
  11         renderTo: Ext.getBody(),
  12         layout: 'fit',
  13         tbar: [{
  14             text: 'Reload Data',
  15             handler: function() {
  16                 store1.loadData(generateData());
  17             }
  18         }],
  19         items: {
  20             id: 'chartCmp',
  21             xtype: 'chart',
  22             style: 'background:#fff',
  23             animate: true,
  24             shadow: true,
  25             store: store1,
  26             axes: [{
  27                 type: 'Numeric',
  28                 position: 'left',
  29                 fields: ['data1'],
  30                 label: {
  31                     renderer: Ext.util.Format.numberRenderer('0,0')
  32                 },
  33                 title: 'Number of Hits',
  34                 grid: true,
  35                 minimum: 0
  36             }, {
  37                 type: 'Category',
  38                 position: 'bottom',
  39                 fields: ['name'],
  40                 title: 'Month of the Year'
  41             }],
  42             series: [{
  43                 type: 'column',
  44                 axis: 'left',
  45                 highlight: true,
  46                 tips: {
  47                   trackMouse: true,
  48                   width: 140,
  49                   height: 28,
  50                   renderer: function(storeItem, item) {
  51                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
  52                   }
  53                 },
  54                 label: {
  55                   display: 'insideEnd',
  56                   'text-anchor': 'middle',
  57                     field: 'data1',
  58                     renderer: Ext.util.Format.numberRenderer('0'),
  59                     orientation: 'vertical',
  60                     color: '#333'
  61                 },
  62                 xField: 'name',
  63                 yField: 'data1'
  64             }]
  65         }
  66     });
  67 });