Sorry must've posted it right before you posted yours. See my post above
Sorry must've posted it right before you posted yours. See my post above
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.
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)
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,
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.
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)
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![]()