examples/charts/Column2.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     store1.loadData(generateData(5, 0));
   6
   7     var colors = ['url(#v-1)',
   8                   'url(#v-2)',
   9                   'url(#v-3)',
  10                   'url(#v-4)',
  11                   'url(#v-5)'];
  12
  13     var baseColor = '#eee';
  14
  15     Ext.define('Ext.chart.theme.Fancy', {
  16         extend: 'Ext.chart.theme.Base',
  17
  18         constructor: function(config) {
  19             this.callParent([Ext.apply({
  20                 axis: {
  21                     fill: baseColor,
  22                     stroke: baseColor
  23                 },
  24                 axisLabelLeft: {
  25                     fill: baseColor
  26                 },
  27                 axisLabelBottom: {
  28                     fill: baseColor
  29                 },
  30                 axisTitleLeft: {
  31                     fill: baseColor
  32                 },
  33                 axisTitleBottom: {
  34                     fill: baseColor
  35                 },
  36                 colors: colors
  37             }, config)]);
  38         }
  39     });
  40
  41     var win = Ext.create('Ext.Window', {
  42         width: 800,
  43         height: 600,
  44         hidden: false,
  45         maximizable: true,
  46         title: 'Column Chart',
  47         renderTo: Ext.getBody(),
  48         layout: 'fit',
  49         tbar: [{
  50             text: 'Reload Data',
  51             handler: function() {
  52                 store1.loadData(generateData(5, 0));
  53             }
  54         }],
  55         items: {
  56             id: 'chartCmp',
  57             xtype: 'chart',
  58             theme: 'Fancy',
  59             animate: {
  60                 easing: 'bounceOut',
  61                 duration: 750
  62             },
  63             store: store1,
  64             background: {
  65                 fill: 'rgb(17, 17, 17)'
  66             },
  67             gradients: [
  68             {
  69                 'id': 'v-1',
  70                 'angle': 0,
  71                 stops: {
  72                     0: {
  73                         color: 'rgb(212, 40, 40)'
  74                     },
  75                     100: {
  76                         color: 'rgb(117, 14, 14)'
  77                     }
  78                 }
  79             },
  80             {
  81                 'id': 'v-2',
  82                 'angle': 0,
  83                 stops: {
  84                     0: {
  85                         color: 'rgb(180, 216, 42)'
  86                     },
  87                     100: {
  88                         color: 'rgb(94, 114, 13)'
  89                     }
  90                 }
  91             },
  92             {
  93                 'id': 'v-3',
  94                 'angle': 0,
  95                 stops: {
  96                     0: {
  97                         color: 'rgb(43, 221, 115)'
  98                     },
  99                     100: {
 100                         color: 'rgb(14, 117, 56)'
 101                     }
 102                 }
 103             },
 104             {
 105                 'id': 'v-4',
 106                 'angle': 0,
 107                 stops: {
 108                     0: {
 109                         color: 'rgb(45, 117, 226)'
 110                     },
 111                     100: {
 112                         color: 'rgb(14, 56, 117)'
 113                     }
 114                 }
 115             },
 116             {
 117                 'id': 'v-5',
 118                 'angle': 0,
 119                 stops: {
 120                     0: {
 121                         color: 'rgb(187, 45, 222)'
 122                     },
 123                     100: {
 124                         color: 'rgb(85, 10, 103)'
 125                     }
 126                 }
 127             }],
 128             axes: [{
 129                 type: 'Numeric',
 130                 position: 'left',
 131                 fields: ['data1'],
 132                 minimum: 0,
 133                 maximum: 100,
 134                 label: {
 135                     renderer: Ext.util.Format.numberRenderer('0,0')
 136                 },
 137                 title: 'Number of Hits',
 138                 grid: {
 139                     odd: {
 140                         stroke: '#555'
 141                     },
 142                     even: {
 143                         stroke: '#555'
 144                     }
 145                 }
 146             }, {
 147                 type: 'Category',
 148                 position: 'bottom',
 149                 fields: ['name'],
 150                 title: 'Month of the Year'
 151             }],
 152             series: [{
 153                 type: 'column',
 154                 axis: 'left',
 155                 highlight: true,
 156                 label: {
 157                   display: 'insideEnd',
 158                   'text-anchor': 'middle',
 159                     field: 'data1',
 160                     orientation: 'horizontal',
 161                     fill: '#fff',
 162                     font: '17px Arial'
 163                 },
 164                 renderer: function(sprite, storeItem, barAttr, i, store) {
 165                     barAttr.fill = colors[i % colors.length];
 166                     return barAttr;
 167                 },
 168                 style: {
 169                     opacity: 0.95
 170                 },
 171                 xField: 'name',
 172                 yField: 'data1'
 173             }]
 174         }
 175     });
 176 });