PDA

View Full Version : Show/Hide a single Line element of a series on Ext JS 4



Corwin86
16 Jun 2012, 8:58 AM
Hi,

I'm pretty new on Ext JS 4 and I have the following question:

How can I Show/Hide a single Line element of a series?

I have this code:


Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

Ext.onReady(function () {

var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Nome mese', 'Valore medio del magazzino budget percentuale', 'Valore medio del magazzino percentuale vs Budget','Valore medio del magazzino percentuale vs Anno Precedente'],
title: 'Valore percentuale',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['Nome mese'],
title: 'Mese dell\'anno'
}],



series: [{
type: 'line',
highlight: {
size: 7,
radius: 7,
},
axis: 'left',
xField: 'Nome mese',
yField: 'Valore medio del magazzino budget percentuale',
style:{stroke: '#E5B96F'},
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
fill: '#E5B96F',
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7,
},
axis: 'left',
smooth: true,


tips: {
trackMouse: true,
width: 80,
height: 25,
renderer: function(storeItem, item) {
this.setTitle(item.value[1] + ' %</span>');
}
},

xField: 'Nome mese',
yField: 'Valore medio del magazzino percentuale vs Budget',

style:{stroke: '#690011'},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
fill: '#690011',
'stroke-width': 0,
}
} , {
type: 'line',
highlight: {
size: 7,
radius: 7,
},
axis: 'left',
smooth: true,

tips: {
trackMouse: true,
width: 80,
height: 25,
renderer: function(storeItem, item) {
this.setTitle(item.value[1] + ' %</span>');
}
},

xField: 'Nome mese',
yField: 'Valore medio del magazzino percentuale vs Anno Precedente',

style:{stroke: '#690011'},

markerConfig: {
type: 'circle',
size: 4,
radius: 4,
fill: '#690011',
'stroke-width': 0,
}
}
]

});


var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Magazzini 3',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Salva grafico',
handler: function() {
Ext.MessageBox.confirm('Conferma il download', 'Confermi di voler eseguire il download del grafico come immagine \'png\'?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, ],
items: chart
});
});



I want to hide one of the line of the Series.

I've seen that there is showAll() and an hideAll method, but I can't understand how to use these.

Thanks for any help!

mitchellsimoens
26 Jun 2012, 8:32 AM
You need to get the series you want to hide and execute hideAll on that series.

Corwin86
26 Jun 2012, 10:24 AM
Thanks mitchellsimoens, but I need more information (how to select a series? how to "name" a series? an example on how to do this on my current code?).

I understand that this is a public and "gratis" forum, so I am organizing for purchasing a support account.

Whit a support account can I expect more info and example?

Thanks again.

mitchellsimoens
26 Jun 2012, 10:35 AM
Premium support will get more personalized support yes. Furthermore, the all the series are kept in the series property of the chart.

Corwin86
4 Jul 2012, 2:28 AM
Hi,

I have bought standard support.

Can you please move this discussion in the right standard support forum?
And also, can you please, give more information (with specific code) on how to solve my problem?

Thanks and best regards.