Show/Hide a single Line element of a series on Ext JS 4

Question

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:

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!

Answer 1

Here is a working sample: You should assign an id to each series to use this code as is.

series: [{

            type: 'line',
            id: 'line1', // Set Id here
            highlight: {
                size: 7,
                radius: 7,
            },

...

var chart = 'assign your chart component to this'
    chart.series.each(function(aSeries) {
         if (aSeries.id == 'line1') {
            aSeries.hideAll();
            return false;
        }
}

Answer 2

In ExtJS 4.1.x you can use the toggleAll function of the line series to show/hide all of the series elements (markers, lines, etc.). I don't know why toggleAll does not show up in the docs but it can be found in the line series source code here.

It is pretty easy if you have the series field name that you want to show/hide. You can simply iterate through the series of the chart and check if the series field is the one you want, then call toggleAll on it with a boolean parameter to either show or hide it.

For example, if myField is the series field name that you want to show/hide, and myChart is a reference to your chart:

Ext.each(myChart.series.items, function(series) {
    if (series.yField == myField) {

        // hides the series
        series.toggleAll(false);

        // shows the series
        series.toggleAll(true);
    }
});

Unfortunately, chart series are not a subclass of Ext.Component so you cannot get a reference to them using ComponentQuery selectors like myChart.down('series[yField=fieldName') you have to do it some other way like the iteration shown above.