PDA

View Full Version : Line chart : how to hide/display a line serie



marxan
30 Nov 2012, 1:07 AM
Hello,

Here's my chart: Depending on the value selected I would like to hide/or display certain line.

For example, if I selected the VALUE_33 and VALUE_40. It should only display these 2 lines.

I don't find the method to do this, I have found the showInLegend properties but it's only linked to the legend.

If anyone could tell me what to use (if it exists). it would be very helpful.

Thanks in advance




Ext.define('TAB.view.chart.NidiDetailsGraph', { extend: 'Ext.chart.Chart',
alias: 'widget.nididetailsgraph',
store: 'NidiGraphStore',
style: 'background:#fff',
id: 'NidiDetailsGraph',
theme: 'Blue',
legend: {
position: 'right'
},
axes: [ {
title: '%',
type: 'Category',
position: 'bottom',
fields: ['AW_EARNING_LEVELS']
},
{
title: 'xxx',
type: 'Numeric',
position: 'left',
fields:['VALUE_33','VALUE_35','VALUE_40','VALUE_45','VALUE_50','VALUE_55',
'VALUE_60','VALUE_67','VALUE_100','VALUE_120','VALUE_150','VALUE_167','VALUE_200'],
label: {
rotate: {
degrees: 90
}
}
}],
series: [
{
type: 'line',
axis: 'left',
yField: 'VALUE_33',
xField: 'AW_EARNING_LEVELS',
highlight: true,
showInLegend: true,
title: 'for 33'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_35',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 35'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_40',
xField: 'AW_EARNING_LEVELS',
showInLegend: true,
title: 'for 40'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_45',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 45'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_50',
xField: 'AW_EARNING_LEVELS',
showInLegend: true,
title: 'for 50'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_55',
xField: 'AW_EARNING_LEVELS',
showInLegend: true,
title: 'for 55'
},
{
type: 'line',
axis: 'left',
xField: 'AW_EARNING_LEVELS',
yField: 'VALUE_60',
showInLegend: true,
title: 'for 60',
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_67',
xField: 'AW_EARNING_LEVELS',
showInLegend: true,
title: 'for 67'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_100',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 100'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_120',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 120'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_150',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 150'
},
{
type: 'line',
axis: 'left',
yField: 'VALUE_167',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 167'
},
{
type: 'line',
id: 'line_200',
axis: 'left',
yField: 'VALUE_200',
xField: 'AW_EARNING_LEVELS',
showInLegend: false,
title: 'for 200'
}
]
});

mitchellsimoens
3 Dec 2012, 4:39 AM
If you want to do it programmatically then use the hideAll method on the series.

marxan
3 Dec 2012, 6:01 AM
How can I know in which serie am I? Do I have to give an ID on each lines of my serie?

mitchellsimoens
3 Dec 2012, 7:04 AM
Depends where you are trying to do this.

marxan
3 Dec 2012, 7:22 AM
When I display the chart(through the controller):

I do something like this but it only works when I use it in the FF console. I also want to hide the legend but I don't find the right method.


// I get the chart
nidiChart = Ext.getCmp('NidiDetailsGraph');
//Loop on each lines of my serie
nidiChart.series.each(function(series) {
if (series.id == 'line_33') {
series.hideAll();
series.visibleInLegend();


My chart:



...
series: [
{
type: 'line',
axis: 'left',
yField: 'VALUE_33',
id: 'line_33',
xField: 'AW_EARNING_LEVELS',
highlight: true,
showInLegend: true,
title: '33%'
},
...