Stack column chart issue with touch-charts-2.0.0-beta

[Gunwant]

Hi All,

I implemented the stacked column chart by using "stacked = true" config parameter with touch chart 1.0 but in touch-charts-2.0.0-beta it is not working. It always shows the normal column charts.

I am using same code for touch-charts-1 and touch-charts-2.0.0-beta only lib difference.
By using interactions it working properly but I want default stack column char without any user interaction.
interactions: [{ type: 'togglestacked',
gesture: 'doubletap'
}]


Please anyone tell me how I can implement stack column chart in touch-charts-2.0.0-beta ?

-thanks
Gunwant

[carruno]

var graphe = Ext.create('Ext.chart.Chart', {
    title: 'Example',
    store: store,
    animate: {
        easing: 'easeOut',
        duration: 500
    },
    legend: { position: 'top' },
    axes: [
    {
        type: 'Numeric',
        position: 'left',
        fields: ['field1', 'field2', 'field3', 'field4', 'field5'],
        grid: {
            odd: {
                opacity: 0.5,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 0.5
            }
        },
        label: {
            renderer: app.Format.numberRenderer('0,000 \u20ac') // ExtJS 4.1.0 function added to app
        }
    },
    {
        type: 'Category',
        position: 'bottom',
        fields: ['title'],
        label: {
            rotate: { degrees: 270 }
        }
    }
    ],
    series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            xField: 'title',
            yField: ['field1', 'field2', 'field3', 'field4', 'field5'],
            title: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE']
        }
    ],
    interactions: [
        {
            type: 'panzoom',
            axes: {
                bottom: {
                    maxZoom: 4
                }
            }
        },
        {
            type: 'togglestacked',
            gesture: 'doubletap'
        }
    ]
}); 

Function to add for stacked Column at Start :

// voila !!
graphe._interactions.items[1].onGesture(); // items[1] for togglestacked in my example

// Display graphe
Ext.getCmp('ext-list-1').up('navigationview').push(graphe); 

[kai5263499]

I got this functionality to work by pulling out the stacked interaction code and calling it programatically.

Here is the stack interaction code:

toggleStacked: function(cmp) {
		var me = cmp.getInteractions().items[0],
         chart = me.getChart(),
         series = me.getSeries();
    	
    	if (chart.getAnimate() && !me.getAnimateDirect()) {
            if (!me.locked) {
                me.lock();
                if (series.stacked) {
                    series.disjointStacked = true;
                    me.afterAnim(series, function() {
                        series.stacked = series.disjointStacked = false;
                        me.afterAnim(series, me.unlock);
                        chart.redraw();
                    });
                    series.drawSeries();
                }
                else {
                    series.stacked = series.disjointStacked = true;
                    me.afterAnim(series, function() {
                        series.disjointStacked = false;
                        me.afterAnim(series, me.unlock);
                        series.drawSeries();
                    });
                    chart.redraw();
                }
            }
        } else {
            series.stacked = !series.stacked;
            chart.redraw();
        }
    }

To use it I call the method and pass it the series I want to be stacked.

This also requires the stack interaction to be added to the chart.