Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Charts break Container.down function

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    17

    Default Charts break Container.down function

    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)
    Attached Files Attached Files

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17

    Default

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

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    168

    Default

    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!

  4. #4

    Question facing same problem

    Hi

    I am facing same problem, what should i do ?

  5. #5

    Exclamation

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

    Code:
    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);

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    168

    Default

    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:

    Code:
        /* ---------------------------------
          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.

  7. #7

    Smile

    Thanks and its working

  8. #8

    Default

    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

    Code:
    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);

  9. #9

    Default

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

  10. #10

    Exclamation

    And if i use legend in this code and remove interactions

    Code:
    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'

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •