Code not working on IPad Simulator whereas working fine on Safari/Crome

[stan229]

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

[philogb]

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.

[stan229]

Doesn't work. Here's the updated

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)

[philogb]

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,

[stan229]

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.

[stan229]

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!

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)

[Jsri]

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