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-|
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