examples/charts/Column2.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require('Ext.chart.*');
  16 Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite']);
  17
  18 Ext.onReady(function () {
  19     store1.loadData(generateData(5, 0));
  20
  21     var colors = ['url(#v-1)',
  22                   'url(#v-2)',
  23                   'url(#v-3)',
  24                   'url(#v-4)',
  25                   'url(#v-5)'];
  26
  27     var baseColor = '#eee';
  28
  29     Ext.define('Ext.chart.theme.Fancy', {
  30         extend: 'Ext.chart.theme.Base',
  31
  32         constructor: function(config) {
  33             this.callParent([Ext.apply({
  34                 axis: {
  35                     fill: baseColor,
  36                     stroke: baseColor
  37                 },
  38                 axisLabelLeft: {
  39                     fill: baseColor
  40                 },
  41                 axisLabelBottom: {
  42                     fill: baseColor
  43                 },
  44                 axisTitleLeft: {
  45                     fill: baseColor
  46                 },
  47                 axisTitleBottom: {
  48                     fill: baseColor
  49                 },
  50                 colors: colors
  51             }, config)]);
  52         }
  53     });
  54
  55     var win = Ext.create('Ext.Window', {
  56         width: 800,
  57         height: 600,
  58         minHeight: 400,
  59         minWidth: 550,
  60         hidden: false,
  61         maximizable: true,
  62         title: 'Column Chart',
  63         renderTo: Ext.getBody(),
  64         layout: 'fit',
  65         tbar: [{
  66             text: 'Reload Data',
  67             handler: function() {
  68                 store1.loadData(generateData(5, 0));
  69             }
  70         }],
  71         items: {
  72             id: 'chartCmp',
  73             xtype: 'chart',
  74             theme: 'Fancy',
  75             animate: {
  76                 easing: 'bounceOut',
  77                 duration: 750
  78             },
  79             store: store1,
  80             background: {
  81                 fill: 'rgb(17, 17, 17)'
  82             },
  83             gradients: [
  84             {
  85                 'id': 'v-1',
  86                 'angle': 0,
  87                 stops: {
  88                     0: {
  89                         color: 'rgb(212, 40, 40)'
  90                     },
  91                     100: {
  92                         color: 'rgb(117, 14, 14)'
  93                     }
  94                 }
  95             },
  96             {
  97                 'id': 'v-2',
  98                 'angle': 0,
  99                 stops: {
 100                     0: {
 101                         color: 'rgb(180, 216, 42)'
 102                     },
 103                     100: {
 104                         color: 'rgb(94, 114, 13)'
 105                     }
 106                 }
 107             },
 108             {
 109                 'id': 'v-3',
 110                 'angle': 0,
 111                 stops: {
 112                     0: {
 113                         color: 'rgb(43, 221, 115)'
 114                     },
 115                     100: {
 116                         color: 'rgb(14, 117, 56)'
 117                     }
 118                 }
 119             },
 120             {
 121                 'id': 'v-4',
 122                 'angle': 0,
 123                 stops: {
 124                     0: {
 125                         color: 'rgb(45, 117, 226)'
 126                     },
 127                     100: {
 128                         color: 'rgb(14, 56, 117)'
 129                     }
 130                 }
 131             },
 132             {
 133                 'id': 'v-5',
 134                 'angle': 0,
 135                 stops: {
 136                     0: {
 137                         color: 'rgb(187, 45, 222)'
 138                     },
 139                     100: {
 140                         color: 'rgb(85, 10, 103)'
 141                     }
 142                 }
 143             }],
 144             axes: [{
 145                 type: 'Numeric',
 146                 position: 'left',
 147                 fields: ['data1'],
 148                 minimum: 0,
 149                 maximum: 100,
 150                 label: {
 151                     renderer: Ext.util.Format.numberRenderer('0,0')
 152                 },
 153                 title: 'Number of Hits',
 154                 grid: {
 155                     odd: {
 156                         stroke: '#555'
 157                     },
 158                     even: {
 159                         stroke: '#555'
 160                     }
 161                 }
 162             }, {
 163                 type: 'Category',
 164                 position: 'bottom',
 165                 fields: ['name'],
 166                 title: 'Month of the Year'
 167             }],
 168             series: [{
 169                 type: 'column',
 170                 axis: 'left',
 171                 highlight: true,
 172                 label: {
 173                   display: 'insideEnd',
 174                   'text-anchor': 'middle',
 175                     field: 'data1',
 176                     orientation: 'horizontal',
 177                     fill: '#fff',
 178                     font: '17px Arial'
 179                 },
 180                 renderer: function(sprite, storeItem, barAttr, i, store) {
 181                     barAttr.fill = colors[i % colors.length];
 182                     return barAttr;
 183                 },
 184                 style: {
 185                     opacity: 0.95
 186                 },
 187                 xField: 'name',
 188                 yField: 'data1'
 189             }]
 190         }
 191     });
 192 });
 193