1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    1
    Vote Rating
    0
    Gunwant is on a distinguished road

      0  

    Default Unanswered: Stack column chart issue with touch-charts-2.0.0-beta

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


    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

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Location
    Marseille, France
    Posts
    19
    Vote Rating
    0
    carruno is on a distinguished road

      0  

    Default Example working yet !

    Example working yet !


    PHP Code:
    var graphe Ext.create('Ext.chart.Chart', {
        
    title'Example',
        
    storestore,
        
    animate: {
            
    easing'easeOut',
            
    duration500
        
    },
        
    legend: { position'top' },
        
    axes: [
        {
            
    type'Numeric',
            
    position'left',
            
    fields: ['field1''field2''field3''field4''field5'],
            
    grid: {
                
    odd: {
                    
    opacity0.5,
                    
    fill'#ddd',
                    
    stroke'#bbb',
                    
    'stroke-width'0.5
                
    }
            },
            
    label: {
                
    rendererapp.Format.numberRenderer('0,000 \u20ac'// ExtJS 4.1.0 function added to app
            
    }
        },
        {
            
    type'Category',
            
    position'bottom',
            
    fields: ['title'],
            
    label: {
                
    rotate: { degrees270 }
            }
        }
        ],
        
    series: [
            {
                
    type'column',
                
    axis'left',
                
    highlighttrue,
                
    xField'title',
                
    yField: ['field1''field2''field3''field4''field5'],
                
    title: ['AAA''BBB''CCC''DDD''EEE']
            }
        ],
        
    interactions: [
            {
                
    type'panzoom',
                
    axes: {
                    
    bottom: {
                        
    maxZoom4
                    
    }
                }
            },
            {
                
    type'togglestacked',
                
    gesture'doubletap'
            
    }
        ]
    }); 
    Function to add for stacked Column at Start :
    PHP Code:
    // voila !!
    graphe._interactions.items[1].onGesture(); // items[1] for togglestacked in my example

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

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2008
    Location
    Atlanta, GA
    Posts
    93
    Vote Rating
    0
    Answers
    1
    kai5263499 is on a distinguished road

      0  

    Default


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

    Here is the stack interaction code:
    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.