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         hidden: false,
  59         maximizable: true,
  60         title: 'Column Chart',
  61         renderTo: Ext.getBody(),
  62         layout: 'fit',
  63         tbar: [{
  64             text: 'Reload Data',
  65             handler: function() {
  66                 store1.loadData(generateData(5, 0));
  67             }
  68         }],
  69         items: {
  70             id: 'chartCmp',
  71             xtype: 'chart',
  72             theme: 'Fancy',
  73             animate: {
  74                 easing: 'bounceOut',
  75                 duration: 750
  76             },
  77             store: store1,
  78             background: {
  79                 fill: 'rgb(17, 17, 17)'
  80             },
  81             gradients: [
  82             {
  83                 'id': 'v-1',
  84                 'angle': 0,
  85                 stops: {
  86                     0: {
  87                         color: 'rgb(212, 40, 40)'
  88                     },
  89                     100: {
  90                         color: 'rgb(117, 14, 14)'
  91                     }
  92                 }
  93             },
  94             {
  95                 'id': 'v-2',
  96                 'angle': 0,
  97                 stops: {
  98                     0: {
  99                         color: 'rgb(180, 216, 42)'
 100                     },
 101                     100: {
 102                         color: 'rgb(94, 114, 13)'
 103                     }
 104                 }
 105             },
 106             {
 107                 'id': 'v-3',
 108                 'angle': 0,
 109                 stops: {
 110                     0: {
 111                         color: 'rgb(43, 221, 115)'
 112                     },
 113                     100: {
 114                         color: 'rgb(14, 117, 56)'
 115                     }
 116                 }
 117             },
 118             {
 119                 'id': 'v-4',
 120                 'angle': 0,
 121                 stops: {
 122                     0: {
 123                         color: 'rgb(45, 117, 226)'
 124                     },
 125                     100: {
 126                         color: 'rgb(14, 56, 117)'
 127                     }
 128                 }
 129             },
 130             {
 131                 'id': 'v-5',
 132                 'angle': 0,
 133                 stops: {
 134                     0: {
 135                         color: 'rgb(187, 45, 222)'
 136                     },
 137                     100: {
 138                         color: 'rgb(85, 10, 103)'
 139                     }
 140                 }
 141             }],
 142             axes: [{
 143                 type: 'Numeric',
 144                 position: 'left',
 145                 fields: ['data1'],
 146                 minimum: 0,
 147                 maximum: 100,
 148                 label: {
 149                     renderer: Ext.util.Format.numberRenderer('0,0')
 150                 },
 151                 title: 'Number of Hits',
 152                 grid: {
 153                     odd: {
 154                         stroke: '#555'
 155                     },
 156                     even: {
 157                         stroke: '#555'
 158                     }
 159                 }
 160             }, {
 161                 type: 'Category',
 162                 position: 'bottom',
 163                 fields: ['name'],
 164                 title: 'Month of the Year'
 165             }],
 166             series: [{
 167                 type: 'column',
 168                 axis: 'left',
 169                 highlight: true,
 170                 label: {
 171                   display: 'insideEnd',
 172                   'text-anchor': 'middle',
 173                     field: 'data1',
 174                     orientation: 'horizontal',
 175                     fill: '#fff',
 176                     font: '17px Arial'
 177                 },
 178                 renderer: function(sprite, storeItem, barAttr, i, store) {
 179                     barAttr.fill = colors[i % colors.length];
 180                     return barAttr;
 181                 },
 182                 style: {
 183                     opacity: 0.95
 184                 },
 185                 xField: 'name',
 186                 yField: 'data1'
 187             }]
 188         }
 189     });
 190 });
 191