Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    14
    Answers
    1
    Vote Rating
    0
    rianatdigitaltrike is on a distinguished road

      0  

    Default Unanswered: Category Axis Labels Not Updating Properly

    Unanswered: Category Axis Labels Not Updating Properly


    I found a bug with the category axis labels. When I bind it to a model, they only update when the number of items in the store changes. e.g. if my API call returns 10 items and the store contains 10 items, the render function isn't called.

    I got around the issue of the render function not getting called by setting the sprite on the axis to dirty. This forced the axis to call the render function. This function passes two parameters: the value used for the label and a reference to the axis itself.

    The second issue came up when I found the actual data set in the axis was not getting updated to what was in the model. I verified that the values were changed in the model. To get around this issue, I used the value passed into the renderer to find the index of it in the data array the axis was using (axis.data) and I used that index to pull the actual value it should be displaying from the model that the axis is bound to.

    I'm assuming you guys know this is broken since the renderer function is never called unless you force it to by setting the sprite to dirty- but I thought I'd explain how I worked around it for anyone else that might be having this issue.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    853
    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


    This for the charts for ST1 or ST2? If you have a bug to report then we need a test case to reproduce it locally.
    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 Premium Member
    Join Date
    Jan 2013
    Posts
    14
    Answers
    1
    Vote Rating
    0
    rianatdigitaltrike is on a distinguished road

      0  

    Default Bug ST2

    Bug ST2


    This is for ST2. I'm using the latest version of Architect to make this. Below are my definitions. This should be fairly easy to reproduce as the renderer function passes the axis object as a 2nd parameter. There is a data array in this object that lists all of the data the axis labels are using. If you populate the model with something like 10 categories, and then update the model with the same number of categories, the renderer function will not be called. I got around this by calling

    Code:
    var axis = Ext.getCmp('mainChart').getAxes()[1];
        axis.getSprites()[0].setDirty(true);
    after my chart data is loaded. Even after I got the renderer called, the data in the axis object did not update with the model.

    Here is the definition of my chart:

    Code:
    Ext.define('MyApp.view.MyBarChart1', {
        extend: 'Ext.chart.CartesianChart',
        alias: 'widget.mybarchart1',
    
    
        alternateClassName: [
            'comboLineBarChart'
        ],
        requires: [
            'MyApp.view.override.MyBarChart1'
        ],
    
    
        config: {
            id: 'mainChart',
            itemId: 'mycartesianchart',
            store: 'chartDataStore',
            colors: [
                '#115fa6',
                '#94ae0a',
                '#a61120'
            ],
            axes: [
                {
                    type: 'numeric',
                    renderer: function(value) {
                        var groupBy = MyApp.app.getController('reportTemplateController').getReportState().get('groupBy');
    
    
                        switch (groupBy) {
                            case 0:
                            case 2:
                            var returnString = value.toFixed(0);
                            returnString = '$'+returnString; 
    
    
                            break;
    
    
                            case 1:
    
    
                            var returnString = value.toFixed(0);
                            returnString = returnString+'%'; 
    
    
                            break;
    
    
    
    
    
    
                            default:
                            var returnString = value.toFixed(0);
    
    
                        }
    
    
                        return returnString; 
    
    
                    },
                    fields: [
                        'trendQuantity',
                        'totalQuantity',
                        'forecastQuantity',
                        'cumulativeQuantity',
                        'compareQuantity',
                        'goalQuantity'
                    ],
                    position: 'left'
                },
                {
                    type: 'category',
                    renderer: function(date, axis) {
                       // this is where I override the axis's array and use the data from the model 
                       // to get the framework to even call this function I had to call this after the data is loaded in the model: 
                     //  var axis = Ext.getCmp('mainChart').getAxes()[1];
                    //   axis.getSprites()[0].setDirty(true);  
                        var chartStore = Ext.data.StoreManager.lookup('chartDataStore'); 
                        var valueIndex = axis.data.indexOf(date);
                        var value = chartStore.getAt(valueIndex).get('date');
    
    
                        if (value != null){
    
    
                            var date = new Date(value);
    
    
                            var controller = MyApp.app.getController('reportTemplateController'); 
                            var reportState = controller.getReportState();
    
    
    
    
                            switch (reportState.get('showBy')){
                                case 0:
                                return Ext.Date.format(date, 'M j Y'); 
    
    
                                break;
    
    
                                case 1:
                                return Ext.Date.format(date, 'M Y'); 
    
    
                                break;
    
    
    
    
                                case 2:
    
    
                                switch (date.getMonth())
                                {
                                    case 0:
                                    case 1:
                                    case 2:
                                    return "Q1 "+Ext.Date.format(date, 'Y'); 
    
    
                                    case 3:
                                    case 4:
                                    case 5:
                                    return "Q2 "+Ext.Date.format(date, 'Y'); 
    
    
                                    case 8:
                                    case 6:
                                    case 7:
                                    return "Q3 "+Ext.Date.format(date, 'Y'); 
    
    
                                    case 9:
                                    case 10:
                                    case 11:
                                    return "Q4 "+Ext.Date.format(date, 'Y'); 
    
    
                                    default:
                                    return Ext.Date.format(date, 'M j Y'); 
    
    
                                }
    
    
    
    
                                break;
    
    
                                case 3:
    
    
                                return Ext.Date.format(date, 'Y'); 
    
    
                                break;
    
    
                                default:
    
    
                                return Ext.Date.format(date, 'M j Y'); 
    
    
    
    
                            }
    
    
    
    
                        }
                        else {
                            return '';
                        }
    
    
                    },
                    fields: [
                        'date'
                    ]
                }
            ],
            series: [
                {
                    type: 'bar',
                    colors: [
                        '#779dbf',
                        '#d6707b'
                    ],
                    xField: 'date',
                    yField: [
                        'totalQuantity'
                    ],
                    stacked: false
                },
                {
                    type: 'line',
                    colors: '#804349',
                    style: {
                        stroke: '#804349',
                        'stroke-width': 1,
                        opacity: 1.0,
                        fillOpacity: 0.1
                    },
                    xField: 'date',
                    yField: 'compareQuantity'
                },
                {
                    type: 'line',
                    colors: '#f0b400',
                    style: {
                        stroke: '#f0b400',
                        'stroke-width': 1,
                        opacity: 1.0,
                        fillOpacity: 0.1
                    },
                    xField: 'date',
                    yField: 'forecastQuantity'
                },
                {
                    type: 'line',
                    colors: '#1e6c0b',
                    style: {
                        stroke: '#1e6c0b',
                        'stroke-width': 1,
                        opacity: 1.0,
                        fillOpacity: 0.1
                    },
                    xField: 'date',
                    yField: 'trendQuantity'
                },
                {
                    type: 'line',
                    colors: '#00488C',
                    style: {
                        stroke: '#00488C',
                        'stroke-width': 1,
                        opacity: 1.0,
                        fillOpacity: 0.1
                    },
                    xField: 'date',
                    yField: 'cumulativeQuantity'
                },
                {
                    type: 'line',
                    colors: '#332600',
                    style: {
                        stroke: '#332600',
                        'stroke-width': 1,
                        opacity: 1.0,
                        fillOpacity: 0.1
                    },
                    xField: 'date',
                    yField: 'goalQuantity'
                }
            ]
        }
    
    
    });
    Here is the definition of the model I used. This is used by a JSONP store.

    Code:
    Ext.define('MyApp.model.ChartDataModel', {
        extend: 'Ext.data.Model',
    
    
        config: {
            fields: [
                {
                    name: 'date',
                    type: 'date'
                },
                {
                    name: 'totalQuantity',
                    type: 'float'
                },
                {
                    name: 'compareQuantity',
                    type: 'float'
                },
                {
                    name: 'trendQuantity',
                    type: 'float'
                },
                {
                    name: 'forecastQuantity',
                    type: 'float'
                },
                {
                    name: 'cumulativeQuantity',
                    type: 'float'
                },
                {
                    name: 'goalQuantity',
                    type: 'float'
                }
            ]
        }
    });

Thread Participants: 1