Thank you for reporting this bug. We will make it our priority to review this report.
  1. #11
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    Answers
    2
    stan229 is on a distinguished road

      0  

    Default


    Sorry must've posted it right before you posted yours. See my post above

  2. #12
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    Could you try by creating a simple chart (Ext.chart.Chart) instead of a chart panel?

    new Ext.chart.Panel({
    items: <configuration>
    });

    would become

    new Ext.chart.Chart(<configuration>);

    Please let me know if that works for you.

  3. #13
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    Answers
    2
    stan229 is on a distinguished road

      0  

    Default


    Doesn't work. Here's the updated
    Code:
    var chart = new Ext.chart.Chart({
        insetPadding: 30,
        shadow: true,
        animate: true,
        store: app.stores.dashboardStore,
        gradients: [{
            'id': 'v-1',
            'angle': 45,
            stops: {
                0: {
                    color: 'rgb(255, 1, 1)'
                },
                100: {
                    color: 'rgb(255,1,1)'
                }
            }
        }, {
            'id': 'v-2',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(255, 183, 1)'
                },
                100: {
                    color: 'rgb(255,1,1)'
                }
            }
        }, {
            'id': 'v-3',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(179,255,1)'
                },
                100: {
                    color: 'rgb(255, 183, 1)'
                }
            }
        }, {
            'id': 'v-4',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(73,255,1)'
                },
                100: {
                    color: 'rgb(179, 255, 1)'
                }
            }
        }, {
            'id': 'v-5',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(73,255,1)'
                },
                100: {
                    color: 'rgb(73, 255, 1)'
                }
            }
        }],
        axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 7
        }],
        series: [{
            type: 'gauge',
            field: 'value',
            donut: 0,
            
            colorSet: ['url(#v-1)', '#ddd'],
            renderer: function(sprite, record, rendererAttributes, i, store){
                if (i == 0) {
                    var fillColor
                    var value = record.get("value")
                    if (value >= 0 && value < 20) {
                        fillColor = "url(#v-1)"
                    }
                    else 
                        if (value >= 21 && value < 40) {
                            fillColor = "url(#v-2)"
                        }
                        else 
                            if (value >= 41 && value < 60) {
                                fillColor = "url(#v-3)"
                            }
                            else 
                                if (value >= 61 && value < 80) {
                                    fillColor = "url(#v-4)"
                                }
                                else {
                                    fillColor = "url(#v-5)"
                                }
                    sprite.attr.fill = fillColor;
                }
                else {
                    return rendererAttributes
                }
                
                
            }
        }]
    
    });
    app.views.DashboardPanel = Ext.extend(Ext.Panel, {
        title: 'Dashboard',
        iconCls: 'speedometer2',
        id: 'dashboardPanel',
        dockedItems: [{
            xtype: 'toolbar',
            title: app.models.Dashboard.orderType + " " + app.models.Dashboard.getDateRangeString(),
            dock: 'top',
            defaults: {
                iconMask: true,
                ui: 'plain'
            },
            layout: {
                type: 'hbox',
            },
            items: [{
                xtype: 'spacer'
            }, {
                iconCls: 'compose',
                handler: function(){
                    if (!this.popup) {
                        this.popup = new Ext.form.FormPanel({
                            floating: true,
                            modal: true,
                            centered: true,
                            width: 300,
                            height: 220,
                            items: [{
                                xtype: 'togglefield',
                                name: 'withinMonth',
                                label: 'Within 30 Days',
                                labelWidth: '60%',
                                labelAlign: 'right',
                                listeners: {
                                    change: function(slider, thumb, newValue, oldValue){
                                        if (newValue == 1) {
                                            this.labelEl.dom.innerText = "After 30 Days"
                                            app.models.Dashboard.withinMonth = false
                                        }
                                        else {
                                            this.labelEl.dom.innerText = "Within 30 Days"
                                            app.models.Dashboard.withinMonth = true
                                        }
                                    }
                                }
                            }, {
                                xtype: 'togglefield',
                                name: 'orderType',
                                label: 'Modifier',
                                labelWidth: '60%',
                                labelAlign: 'right',
                                listeners: {
                                    change: function(slider, thumb, newValue, oldValue){
                                        if (newValue == 1) {
                                            this.labelEl.dom.innerText = "Full POC"
                                            app.models.Dashboard.orderType = "Full POC"
                                        }
                                        else {
                                            this.labelEl.dom.innerText = "Modifier"
                                            app.models.Dashboard.orderType = "Modifier"
                                        }
                                    }
                                }
                            }, {
                                xtype: 'button',
                                text: 'Refresh',
                                handler: function(){
                                    app.stores.dashboardStore.load();
                                    this.ownerCt.hide();
                                    chart.ownerCt.dockedItems.items[0].setTitle(app.models.Dashboard.orderType + " " + app.models.Dashboard.getDateRangeString());
                                }
                            }]
                        })
                    }
                    this.popup.show('pop');
                }
            }]
        }],
        
        items: [chart],
        listeners: {
            activate: {
                fn: function(){
                    app.stores.dashboardStore.load();
                }
            }
        },
        initComponent: function(){
            app.views.DashboardPanel.superclass.initComponent.apply(this, arguments);
        }
    });
    
    
    Ext.reg('DashboardPanel', app.views.DashboardPanel)

  4. #14
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    This seems like a layout problem. Can you verify that the actual dom elements for the chart are generated on the page with the element inspector -firebug or chrome inspector (if you find something named surface or a canvas tag name then that's it . Also, could you set a proper with and height (say 400, 400) to the chart configuration and see if it shows?

    I think a proper layout has to be specified for the items inside the hbox. I could try to see the exact layout problem if I had a simpler use case that I can run locally. You can send that to me if you want.

    Thanks,

  5. #15
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    Answers
    2
    stan229 is on a distinguished road

      0  

    Default


    The hbox layout is for the dockedItems. Setting the width&height didn't do fix it.
    There is are only two canvas tags. When it was working there were several canvas tags in the divs.

  6. #16
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    Answers
    2
    stan229 is on a distinguished road

      0  

    Default


    I got it working. I just combined the Ext.Panel and the Ext.Chart into one Ext.chart.Panel and it worked.

    I had to add my dockedItems on rendering though...

    Thank you though for the help!

    Code:
    app.views.DashboardPanel = Ext.extend(Ext.chart.Panel, {
        title: 'Dashboard',
        iconCls: 'speedometer2',
        id: 'dashboardPanel',
        items: [{
            shadow: true,
            animate: true,
            store: app.stores.dashboardStore,
            gradients: [{
                'id': 'v-1',
                'angle': 45,
                stops: {
                    0: {
                        color: 'rgb(255, 1, 1)'
                    },
                    100: {
                        color: 'rgb(255,1,1)'
                    }
                }
            }, {
                'id': 'v-2',
                'angle': 247,
                stops: {
                    0: {
                        color: 'rgb(255, 183, 1)'
                    },
                    100: {
                        color: 'rgb(255,1,1)'
                    }
                }
            }, {
                'id': 'v-3',
                'angle': 247,
                stops: {
                    0: {
                        color: 'rgb(179,255,1)'
                    },
                    100: {
                        color: 'rgb(255, 183, 1)'
                    }
                }
            }, {
                'id': 'v-4',
                'angle': 247,
                stops: {
                    0: {
                        color: 'rgb(73,255,1)'
                    },
                    100: {
                        color: 'rgb(179, 255, 1)'
                    }
                }
            }, {
                'id': 'v-5',
                'angle': 247,
                stops: {
                    0: {
                        color: 'rgb(73,255,1)'
                    },
                    100: {
                        color: 'rgb(73, 255, 1)'
                    }
                }
            }],
            axes: [{
                type: 'gauge',
                position: 'gauge',
                minimum: 0,
                maximum: 100,
                steps: 10,
                margin: 7
            }],
            series: [{
                type: 'gauge',
                field: 'value',
                donut: 0,
                
                colorSet: ['url(#v-1)', '#ddd'],
                renderer: function(sprite, record, rendererAttributes, i, store){
                    if (i == 0) {
                        var fillColor
                        var value = record.get("value")
                        if (value >= 0 && value < 20) {
                            fillColor = "url(#v-1)"
                        }
                        else 
                            if (value >= 21 && value < 40) {
                                fillColor = "url(#v-2)"
                            }
                            else 
                                if (value >= 41 && value < 60) {
                                    fillColor = "url(#v-3)"
                                }
                                else 
                                    if (value >= 61 && value < 80) {
                                        fillColor = "url(#v-4)"
                                    }
                                    else {
                                        fillColor = "url(#v-5)"
                                    }
                        sprite.attr.fill = fillColor;
                    }
                    else {
                        return rendererAttributes
                    }
                    
                    
                }
            }]
        }],
        listeners: {
            render: {
                fn: function(){
                    this.dockedItems.get(0).hide()
                    this.addDocked({
                        xtype: 'toolbar',
                        title: app.models.Dashboard.orderType + " " + app.models.Dashboard.getDateRangeString(),
                        dock: 'top',
                        defaults: {
                            iconMask: true,
                            ui: 'plain'
                        },
                        layout: {
                            type: 'hbox',
                        },
                        items: [{
                            xtype: 'spacer'
                        }, {
                            iconCls: 'compose',
                            handler: function(){
                                if (!this.popup) {
                                    this.popup = new Ext.form.FormPanel({
                                        floating: true,
                                        modal: true,
                                        centered: true,
                                        width: 300,
                                        height: 220,
                                        items: [{
                                            xtype: 'togglefield',
                                            name: 'withinMonth',
                                            label: 'Within 30 Days',
                                            labelWidth: '60%',
                                            labelAlign: 'right',
                                            listeners: {
                                                change: function(slider, thumb, newValue, oldValue){
                                                    if (newValue == 1) {
                                                        this.labelEl.dom.innerText = "After 30 Days"
                                                        app.models.Dashboard.withinMonth = false
                                                    }
                                                    else {
                                                        this.labelEl.dom.innerText = "Within 30 Days"
                                                        app.models.Dashboard.withinMonth = true
                                                    }
                                                }
                                            }
                                        }, {
                                            xtype: 'togglefield',
                                            name: 'orderType',
                                            label: 'Modifier',
                                            labelWidth: '60%',
                                            labelAlign: 'right',
                                            listeners: {
                                                change: function(slider, thumb, newValue, oldValue){
                                                    if (newValue == 1) {
                                                        this.labelEl.dom.innerText = "Full POC"
                                                        app.models.Dashboard.orderType = "Full POC"
                                                    }
                                                    else {
                                                        this.labelEl.dom.innerText = "Modifier"
                                                        app.models.Dashboard.orderType = "Modifier"
                                                    }
                                                }
                                            }
                                        }, {
                                            xtype: 'button',
                                            text: 'Refresh',
                                            handler: function(){
                                                app.stores.dashboardStore.load();
                                                this.ownerCt.hide();
                                                chart.ownerCt.dockedItems.items[0].setTitle(app.models.Dashboard.orderType + " " + app.models.Dashboard.getDateRangeString());
                                            }
                                        }]
                                    })
                                }
                                this.popup.show('pop');
                            }
                        }]
                    });
                }
            },
            activate: {
                fn: function(){
                    app.stores.dashboardStore.load();
                }
            }
        },
        initComponent: function(){
            app.views.DashboardPanel.superclass.initComponent.apply(this, arguments);
        }
    });
    
    
    Ext.reg('DashboardPanel', app.views.DashboardPanel)

  7. #17
    Sencha User
    Join Date
    Nov 2012
    Posts
    34
    Vote Rating
    0
    Jsri is on a distinguished road

      0  

    Default


    Hi,
    My chart code similar to Energyapp example is working correctly on iPad. But not on iPhone and android phone. Do you know what can be the reason for this? The chart is not getting displayed on phones

    Please help me with this. I've no clue on how to go ahead with this