Charts break Container.down function

[alanr1]

When I call .down('#MyItemId') on a container with a chart somewhere in its descendants, it throws an error
Uncaught TypeError: Object #<Object> has no method 'getItemId'
This seems to be because the function is querying chart sub-objects like axes which it probably shouldn't be doing.

Attached is the Combo chart example to which I added a sample this.down call.

I am using touch-charts-1.0.0-commercial, but this bug has existed since alpha2.

(Also, I posted http://www.sencha.com/forum/showthre...hart-label-bug in the wrong forum, could someone move it here? thanks)

[Jamie Avins]

I thought this was fixed much earlier. We'll get this addresses ASAP.

[philogb]

Hi, Thank you very much for your report.

There is indeed a bug with how elements are queried within the Chart. Because some of the chart elements are lazy loaded, or not initialized until they're actually rendered (this is what happens in the example with the radar and pie charts) then these elements shouldn't be returned by component query, since this would create a problem. Non-initialized objects are configuration objects and not Series/Axis instances, so they don't have getItemId or getRefItems, or any other method needed by ComponentQuery and this is why this error is thrown.

I just added a check for this in the Chart code, so non-initialized objects are not returned by the Chart `getRefItems` method. Until the next patch release, one way to get the bar chart panel would be by using the handle you have to `barChart` in the Combo code.

I hope this helps, and thank you very much again for your bug report!

[babar.sajjad]

Hi

I am facing same problem, what should i do ?

[babar.sajjad]

I am getting this Object #<Object> has no method 'getRefItems', when i added chart.Chart in the panel, my code is like this

Application.views.ProgressViewGraph = Ext.extend(Ext.chart.Chart,{
    id : 'ProgressViewGraphID',
    animate: true,
    store: 'ProgrssCharts',
    interactions: [{
        type: 'itemhighlight'
        },{
         type: 'panzoom',
            axes: {
                left: {}
            }
    }],
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            title: 'Weight',
            fields: ['measure_value']
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['measure_date'],
            title: 'Date'
        }
    ],
    series: [{
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        fill: true,
        smooth: true,
        axis: 'left',
        xField: 'measure_date',
        yField: 'measure_value'
    }]
});


Application.views.ProgressViewChartPanel = Ext.extend(Ext.Panel,{
    id : 'ProgressViewChartID',
    scroll : 'vertical',
    layout: 'fit',
    initComponent : function(){
       Ext.apply(Application.views,{
            progressViewGraph : new Application.views.ProgressViewGraph()
        });
        Ext.apply(this,{
            items: [Application.views.progressViewGraph]
        });
        Application.views.ProgressViewChartPanel.superclass.initComponent.apply(this,arguments);
    },
    listeners : {
        afterrender :function(p){
             this.addDocked([
                {
                    xtype : 'toolbar',
                    ui : 'toolbarCls',
                    dock : 'top',
                    title : 'Progress',
                    items :[
                        {
                            xtype : 'button',
                            ui : 'btnlight',
                            text : 'back',
                            cls : 'back'
                        }
                    ]
                },
            ]);
        }
    }
});


Ext.reg('ProgressViewCharts', Application.views.ProgressViewChartPanel);

[philogb]

Lets try to patch it. In Ext.chart.Chart (Chart.js file in chart src folder) try looking for "Methods needed for Component Query" towards the bottom of the file, and replace those methods with these:

    /* ---------------------------------
      Methods needed for ComponentQuery
     ----------------------------------*/


    ownerCt: null,


    getItemId: function() {
        return this.el && this.el.id || this.id || null;
    },


    initCls: function() {
        return (this.cls || '').split(' ');
    },


    isXType: function(xtype) {
        return xtype === 'chart';
    },


    getRefItems: function(deep) {
        var me = this,
            ans = [];


        me.series.each(function(series) {
            if (series.getRefItems) {
                ans.push(series);
                if (deep) {
                    if (series.markerStyle) {
                        ans.push(series.markerStyle);
                    }
                    if (series.labelStyle) {
                        ans.push(series.labelStyle);
                    }
                    if (series.calloutStyle) {
                        ans.push(series.calloutStyle);
                    }
                }
            }
        });


        me.axes.each(function(axis) {
            if (axis.getRefItems) {
                ans.push(axis);
                if (deep && axis.labelStyle) {
                    ans.push(axis.labelStyle);
                }
                if (deep && axis.gridStyle) {
                    ans.push(axis.gridStyle);
                    ans.push(axis.gridStyle.oddStyle);
                    ans.push(axis.gridStyle.evenStyle);
                }
            }
        });


        me.interactions.each(function(interaction) {
            ans.push(interaction);
            if (deep) {
                ans = ans.concat(interaction.getRefItems(deep));
            }
        });


        return ans;
    }

Please let me know if that works for you.

[babar.sajjad]

Thanks and its working

[babar.sajjad]

Now I got a problem again , first time it works fine and when i navigate back to page i get this error Uncaught TypeError: Object #<Object> has no method 'getRefItems', my application is in MVC design pattern and the code is

Application.views.ProgressViewGraph = Ext.extend(Ext.chart.Chart,{
    id : 'ProgressViewGraphID',
    animate: true,
    store: 'ProgrssCharts',
    interactions: [{
        type: 'panzoom'
    }],
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            title: 'Weight',
            fields: ['measure_value'],
            minorTickSteps: 1
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['measure_date']
        }
    ],
    series: [{
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        fill: true,
        smooth: true,
        axis: 'left',
        xField: 'measure_date',
        yField: 'measure_value'
    },
    {
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        fill: true,
        smooth: true,
        axis: 'left',
        xField: 'measure_date',
        yField: 'goal'
    }]
});

Application.views.ProgressViewChartPanel = Ext.extend(Ext.Panel,{
    id : 'ProgressViewChartID',
    scroll : 'vertical',
    layout: 'fit',
    initComponent : function(){
       Ext.apply(Application.views,{
            progressViewGraph : new Application.views.ProgressViewGraph()
        });
        Ext.apply(this,{
            items: [Application.views.progressViewGraph]
        });
        Application.views.ProgressViewChartPanel.superclass.initComponent.apply(this,arguments);
    },
    listeners : {
        afterrender :function(p){
             this.addDocked([
                {
                    xtype : 'toolbar',
                    ui : 'toolbarCls',
                    dock : 'top',
                    title : 'Progress',
                    items :[
                        {
                            xtype : 'button',
                            ui : 'btnlight',
                            text : 'back',
                            cls : 'back',
                            handler : function(){
                                var hash = window.location.hash.split('/');
                                var measure_id = hash[2];
                                var url = 'progress/progress_tracker/'+measure_id;
                                Ext.redirect(url);
                            }
                        }
                    ]
                },
            ]);
        }
    }
});

Ext.reg('ProgressViewCharts', Application.views.ProgressViewChartPanel);

[babar.sajjad]

If i removed interactions from the above code it works fine, desperately looking for a solution

[babar.sajjad]

And if i use legend in this code and remove interactions

Application.views.ProgressViewGraph = Ext.extend(Ext.chart.Chart,{
    id : 'ProgressViewGraphID',
    animate: true,
    store: 'ProgrssCharts',
    legend: {
            position: 'top'
        },
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            title: 'Weight',
            fields: ['measure_value'],
            minorTickSteps: 1,
            minimum: 0,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            adjustMinimumByMajorUnit: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['measure_date']
        }
    ],
    series: [{
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        fill: true,
        smooth: true,
        axis: 'left',
        xField: 'measure_date',
        yField: 'measure_value'
    },
    {
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        fill: true,
        smooth: true,
        axis: 'left',
        xField: 'measure_date',
        yField: 'goal'
    }]
});


Application.views.ProgressViewChartPanel = Ext.extend(Ext.Panel,{
    id : 'ProgressViewChartID',
    scroll : 'vertical',
    layout: 'fit',
    initComponent : function(){
       Ext.apply(Application.views,{
            progressViewGraph : new Application.views.ProgressViewGraph()
        });
        Ext.apply(this,{
            items: [Application.views.progressViewGraph]
        });
        Application.views.ProgressViewChartPanel.superclass.initComponent.apply(this,arguments);
    },
    listeners : {
        afterrender :function(p){
             this.addDocked([
                {
                    xtype : 'toolbar',
                    ui : 'toolbarCls',
                    dock : 'top',
                    title : 'Progress',
                    items :[
                        {
                            xtype : 'button',
                            ui : 'btnlight',
                            text : 'back',
                            cls : 'back',
                            handler : function(){
                                var hash = window.location.hash.split('/');
                                var measure_id = hash[2];
                                var url = 'progress/progress_tracker/'+measure_id;
                                Ext.redirect(url);
                            }
                        }
                    ]
                },
            ]);
        }
    }
});


Ext.reg('ProgressViewCharts', Application.views.ProgressViewChartPanel);

I get this Object #<Object> has no method 'orient'