examples/charts/Bar.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     Ext.chart.theme.White = Ext.extend(Ext.chart.theme.Base, {
   6         constructor: function() {
   7            Ext.chart.theme.White.superclass.constructor.call(this, {
   8                axis: {
   9                    stroke: 'rgb(8,69,148)',
  10                    'stroke-width': 1
  11                },
  12                axisLabel: {
  13                    fill: 'rgb(8,69,148)',
  14                    font: '12px Arial',
  15                    'font-family': '"Arial',
  16                    spacing: 2,
  17                    padding: 5,
  18                    renderer: function(v) { return v; }
  19                },
  20                axisTitle: {
  21                   font: 'bold 18px Arial'
  22                }
  23            });
  24         }
  25     });
  26
  27     var win = Ext.create('Ext.Window', {
  28         width: 800,
  29         height: 600,
  30         hidden: false,
  31         maximizable: true,
  32         title: 'Bar Chart',
  33         renderTo: Ext.getBody(),
  34         layout: 'fit',
  35         tbar: [{
  36             text: 'Reload Data',
  37             handler: function() {
  38                 store1.loadData(generateData());
  39             }
  40         }],
  41         items: {
  42             id: 'chartCmp',
  43             xtype: 'chart',
  44             animate: true,
  45             shadow: true,
  46             store: store1,
  47             axes: [{
  48                 type: 'Numeric',
  49                 position: 'bottom',
  50                 fields: ['data1'],
  51                 label: {
  52                     renderer: Ext.util.Format.numberRenderer('0,0')
  53                 },
  54                 title: 'Number of Hits',
  55                 grid: true,
  56                 minimum: 0
  57             }, {
  58                 type: 'Category',
  59                 position: 'left',
  60                 fields: ['name'],
  61                 title: 'Month of the Year'
  62             }],
  63             theme: 'White',
  64             background: {
  65               gradient: {
  66                 id: 'backgroundGradient',
  67                 angle: 45,
  68                 stops: {
  69                   0: {
  70                     color: '#ffffff'
  71                   },
  72                   100: {
  73                     color: '#eaf1f8'
  74                   }
  75                 }
  76               }
  77             },
  78             series: [{
  79                 type: 'bar',
  80                 axis: 'bottom',
  81                 highlight: true,
  82                 tips: {
  83                   trackMouse: true,
  84                   width: 140,
  85                   height: 28,
  86                   renderer: function(storeItem, item) {
  87                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  88                   }
  89                 },
  90                 label: {
  91                   display: 'insideEnd',
  92                     field: 'data1',
  93                     renderer: Ext.util.Format.numberRenderer('0'),
  94                     orientation: 'horizontal',
  95                     color: '#333',
  96                   'text-anchor': 'middle'
  97                 },
  98                 xField: 'name',
  99                 yField: ['data1']
 100             }]
 101         }
 102     });
 103 });