mercredi 26 mars 2014

Bar color Differentiation among all bars - Column Chart Extjs 4

I have formed a column chart with some sample data, my requirement is to differentiate a single bar from other bars in the chart { my condition is if x-axis value is "others" } and I've achieved it as shown in attachment :

Attachment 48456 The code for my requirement is :

var store = Ext.create('Ext.data.JsonStore', {

fields: ['name', 'data0', 'data'],

data: [

{ 'name': 'metric one', 'data0': 60, 'data':10 },

{ 'name': 'metric two', 'data0': 20, 'data': 7 },

{ 'name': 'metric three','data0': 50, 'data': 5 },

{ 'name': 'metric four', 'data0': 80, 'data': 2 },

{ 'name': 'others', 'data0': 10, 'data':27 }

]

});



Ext.create('Ext.chart.Chart', {

renderTo: Ext.getBody(),

width: 500,

height: 300,

animate: true,

store: store,

axes: [

{

type: 'Numeric',

position: 'left',

fields: ['data', 'data0'],

label: {

renderer: Ext.util.Format.numberRenderer('0,0')

},

title: 'Sample Values',

grid: true,

minimum: 0

},

{

type: 'Category',

position: 'bottom',

fields: ['name'],

title: 'Sample Metrics'

}

],

series: [

{

type: 'column',

axis: 'left',

highlight: true,

tips: {

trackMouse: true,

width: 140,

height: 28,

renderer: function(storeItem, item) {

this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');

}

},

label: {

display: 'insideEnd',

'text-anchor': 'middle',

field: 'data',

renderer: Ext.util.Format.numberRenderer('0'),

orientation: 'vertical',

color: '#333'

},

xField: 'name',

yField: ['data', 'data0'],

renderer: function(sprite, record, attr, index, store) {



var value = record.get('name');



var color;

if (value== 'others') {

color = 'rgb(205, 255, 255)';

}

return Ext.apply(attr, {

fill: color

});

}

}

]

});

The problem I'm facing is, its not rendering the chart at all with the error

TypeError: record is undefined

Please help me fix it.. 8-|




Aucun commentaire:

Enregistrer un commentaire