You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User raskri's Avatar
    Join Date
    Dec 2008
    Location
    Stavanger, Norway
    Posts
    73
    Answers
    1
    Vote Rating
    0
    raskri is on a distinguished road

      0  

    Question Unanswered: My column chart is not behaving

    Unanswered: My column chart is not behaving


    I have some buttons manipulating the store which is used in my POC chart. If I remove the year 2008(which has the lowest value) the other columns show wrong "height".

    What am I doing wrong here?

    Screenshot-Column Chart - Chromium.jpgScreenshot-Column Chart - Chromium-1.jpg

    Code:
    Ext.setup({
        onReady: function() {
            window.generateData = function() {
                var data = [], i;
     
                for (i = 0; i < 5; i++) {
                    data.push({
                        year: 2008 + i,
                        data1: (i +1)  * 50                   
                    });
                }
                return data;
            };
           
            window.store1 = new Ext.data.JsonStore({
                fields: ['year', {
                    name: 'data1',
                    type:'number'
                }],
                data: generateData()
            });
            
            window.store2 = new Ext.data.JsonStore({
                fields: ['year', {
                    name: 'data1',
                    type:'number'
                }]
            });
           
            var segmentedButton = new Ext.SegmentedButton({
                allowMultiple: true,
                items: [{
                    text: '2008'                   
                },{
                    text: '2009'                    
                },{
                    text: '2010'                    
                },{
                    text: '2011'                    
                },{
                    text: '2012'                    
                }],
                listeners: {
                    toggle: function(container, button, pressed){
                        if(pressed){
                            var index = store1.findExact('year', parseInt(button.text));
                            var model = store1.getAt(index);
                            store2.add(model);
                            store1.removeAt(index);
                        }
                        else {
                            var index = store2.findExact('year', parseInt(button.text));
                            var model = store2.getAt(index);
                            store1.add(model);
                            store2.removeAt(index);
                            store1.sort('year', 'ASC');
                        }
                    }
                }
            });
            
            window.d = new Ext.chart.Panel({
                fullscreen: true,
                title: 'Usage',
                dockedItems: [{
                    dock : 'top',
                    xtype: 'toolbar',
                    ui   : 'light',
                    items: [segmentedButton]
                }],
                items: [{
                    store: store1,
                    animate: true,
                    axes: [{
                        type: 'Numeric',
                        position: 'left',
                        grid: {
                            even :{
                                fill: '#EEE'
                            },
                            odd :{
                                fill: '#FFF'
                            }
                        },
                        fields: ['data1'],
                        title: 'Usage'
                    },{
                        type: 'Category',
                        position: 'bottom',
                        fields: ['year'],
                        title: 'Year'
                    }],
                    series: [{
                        type: 'column',
                        axis: 'left',
                        label: {
                          field: 'data1'
                        },
                        xField: 'year',
                        yField: 'data1',
                        showInLegend: false
                    }]
                }]
            });
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would classify this as a bug. You are changing data in the store but the actual column series isn't displaying the columns correctly.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    CHARTS-312
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User raskri's Avatar
    Join Date
    Dec 2008
    Location
    Stavanger, Norway
    Posts
    73
    Answers
    1
    Vote Rating
    0
    raskri is on a distinguished road

      0  

    Default


    Also if I were to remove all but one, the label in the bottom is wrong...
    Screenshot-Column Chart - Chromium.jpg

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    mediari is on a distinguished road

      0  

    Default


    My column chart isn't displaying correctly either. I have a store with irregular data (years) that jumps from 2012 to 2041 (both 0) before ascending from 2043. The line chart shows it correctly:

    linecahrtbug1.jpg

    Whereas changing the series type to column gives the following, inaccurate graph:

    columnchartbug1.jpg

    Is this a bug, or is there a reason for this behavior? The obvious workaround is to ensure there are no missed years and/or pre-process the data into equal intervals in the variables that will apply to the x-axis, but this is inconvenient and isn't necessary for other chart types.

    Thanks.

Thread Participants: 2

Tags for this Thread