examples/charts/BarRenderer.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     var win = Ext.create('Ext.Window', {
   6         width: 800,
   7         height: 600,
   8         hidden: false,
   9         maximizable: true,
  10         title: 'Bar Renderer',
  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             xtype: 'chart',
  21             animate: true,
  22             style: 'background:#fff',
  23             shadow: false,
  24             store: store1,
  25             axes: [{
  26                 type: 'Numeric',
  27                 position: 'bottom',
  28                 fields: ['data1'],
  29                 label: {
  30                    renderer: Ext.util.Format.numberRenderer('0,0')
  31                 },
  32                 title: 'Number of Hits',
  33                 minimum: 0
  34             }, {
  35                 type: 'Category',
  36                 position: 'left',
  37                 fields: ['name'],
  38                 title: 'Month of the Year'
  39             }],
  40             series: [{
  41                 type: 'bar',
  42                 axis: 'bottom',
  43                 label: {
  44                     display: 'insideEnd',
  45                     field: 'data1',
  46                     renderer: Ext.util.Format.numberRenderer('0'),
  47                     orientation: 'horizontal',
  48                     color: '#333',
  49                     'text-anchor': 'middle',
  50                     contrast: true
  51                 },
  52                 xField: 'name',
  53                 yField: ['data1'],
  54                 //color renderer
  55                 renderer: function(sprite, record, attr, index, store) {
  56                     var fieldValue = Math.random() * 20 + 10;
  57                     var value = (record.get('data1') >> 0) % 5;
  58                     var color = ['rgb(213, 70, 121)',
  59                                  'rgb(44, 153, 201)',
  60                                  'rgb(146, 6, 157)',
  61                                  'rgb(49, 149, 0)',
  62                                  'rgb(249, 153, 0)'][value];
  63                     return Ext.apply(attr, {
  64                         fill: color
  65                     });
  66                 }
  67             }]
  68         }
  69     });
  70 });