/ext-4.1.0_b3/examples/charts/BarRenderer.js
JavaScript | 72 lines | 70 code | 1 blank | 1 comment | 0 complexity | 0ac8c416878dfbcd207efb24e9e8ed1e MD5 | raw file
1Ext.require('Ext.chart.*');
2Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
3
4Ext.onReady(function () {
5 var win = Ext.create('Ext.Window', {
6 width: 800,
7 height: 600,
8 minHeight: 400,
9 minWidth: 550,
10 hidden: false,
11 maximizable: true,
12 title: 'Bar Renderer',
13 renderTo: Ext.getBody(),
14 layout: 'fit',
15 tbar: [{
16 text: 'Reload Data',
17 handler: function() {
18 store1.loadData(generateData());
19 }
20 }],
21 items: {
22 xtype: 'chart',
23 animate: true,
24 style: 'background:#fff',
25 shadow: false,
26 store: store1,
27 axes: [{
28 type: 'Numeric',
29 position: 'bottom',
30 fields: ['data1'],
31 label: {
32 renderer: Ext.util.Format.numberRenderer('0,0')
33 },
34 title: 'Number of Hits',
35 minimum: 0
36 }, {
37 type: 'Category',
38 position: 'left',
39 fields: ['name'],
40 title: 'Month of the Year'
41 }],
42 series: [{
43 type: 'bar',
44 axis: 'bottom',
45 label: {
46 display: 'insideEnd',
47 field: 'data1',
48 renderer: Ext.util.Format.numberRenderer('0'),
49 orientation: 'horizontal',
50 color: '#333',
51 'text-anchor': 'middle',
52 contrast: true
53 },
54 xField: 'name',
55 yField: ['data1'],
56 //color renderer
57 renderer: function(sprite, record, attr, index, store) {
58 var fieldValue = Math.random() * 20 + 10;
59 var value = (record.get('data1') >> 0) % 5;
60 var color = ['rgb(213, 70, 121)',
61 'rgb(44, 153, 201)',
62 'rgb(146, 6, 157)',
63 'rgb(49, 149, 0)',
64 'rgb(249, 153, 0)'][value];
65 return Ext.apply(attr, {
66 fill: color
67 });
68 }
69 }]
70 }
71 });
72});