PDA

View Full Version : Highlight a particular bar with different color - Extjs 4 Column Chart



dillu5c5
27 Mar 2014, 2:48 AM
I've a requirement to highlight a single bar { out of many } in different stroke and color, I tried to alter the highlightCfg basing on my condition as
if(storeItem.get(nameColms) == 'Others')
{
highlightCfg = {
"stroke-width": 10,
stroke: '#333'
};
}
else
highlightCfg = {
"stroke-width": 3,
stroke: '#000000'
};
and assigned this highlightCfg variable for the highlight config. But it didn't work :((
Please post some suggestions, thanks in advance.
-
Satya Dileep Kumar

scottmartin
28 Mar 2014, 7:37 AM
See if this will help:



Ext.application({
name : 'Fiddle',

launch : function() {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data',

renderer: function(sprite, record, attr, index, store) {
var value = record.get('name');

if (value === 'metric three') {
return Ext.apply(attr, {
fill: '#ff0000'
});
} else return attr;
}

}]
});


}
});

48477

scottmartin
28 Mar 2014, 9:00 AM
I realized that I answered this incorrectly. The highlightCfg is global to the series and not setup like the bar renderers. Even if you set the config in the renderer:


Ext.apply(this.highlightCfg, specialCfg);


It is just going to override the series and not per bar.

You would need to override the code to apply a highlightCfg for each item.

Scott.

dillu5c5
28 Mar 2014, 11:28 PM
Hi Scott,
The example you provided (which you considered wrong ) is helpful too. I've tried that renderer for my series and it worked fine but then I've a problem again.. if I give more than one series of Data, that renderer throws an error.
Sample data I've given :
{ name : 'metric one', data0 : 45, data1 : 30 }

Please help me out..
Satya dileep kumar.:s

scottmartin
29 Mar 2014, 6:39 PM
What is the error?

It would be helpful to show your code .. here is just a quick example with 2 series.



Ext.application({
name: 'Fiddle',

launch: function() {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data', 'data1'],
data: [
{ 'name': 'metric one', 'data':30, 'data1':20 },
{ 'name': 'metric two', 'data':27, 'data1':17 },
{ 'name': 'metric three', 'data':25, 'data1':15 },
{ 'name': 'metric four', 'data':22, 'data1':12 },
{ 'name': 'metric five', 'data':47, 'data1':37 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data',

renderer: function(sprite, record, attr, index, store) {
var value = record.get('name');

if (value === 'metric three') {
return Ext.apply(attr, {
fill: '#ff0000'
});
} else return attr;
}

}, {
type: 'bar',
axis: 'bottom',
highlight: true,

tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data1',

renderer: function(sprite, record, attr, index, store) {
var value = record.get('name');

if (value === 'metric three') {
return Ext.apply(attr, {
fill: '#ff00ff'
});
} else return attr;
}

}]
});


}
});

nareh tank
5 Nov 2014, 10:42 PM
Hi Scott,
The example you provided (which you considered wrong ) is helpful too. I've tried that renderer for my series and it worked fine but then I've a problem again.. if I give more than one series of Data, that renderer throws an error.
Sample data I've given :
{ name : 'metric one', data0 : 45, data1 : 30 }

Please help me out..
Satya dileep kumar.:sI have same problem.
did you got any solution?