PDA

View Full Version : reDraw chart in popup panel



mkrakowski
29 Apr 2013, 1:11 PM
I have a bar chart that when clicking on each bar it pops-up a new panel (small pop up window) containing a more detailed bar chart.

Chart.redraw() works fine when the "popup" is open and user clicks on other bars (e.g. it updates and redraws the chart). However, when the popup is closed, and another bar is clicked (i.e. re-open the popup) it throws a TypeError.

Here's my code

Listener for each individual bar...


listeners: {
'itemmouseup': function(item) {
// Retrieve individual bar values
barId = item.sprite.id;
barTitle = item.value[0];
barValue = item.value[1];
buildSalesDataPopupWindow(barId, barTitle, barValue);
}
},
[...]


Popup window (panel) which contains the more detailed chart


function buildSalesDataPopupWindow(barId, barTitle, barValue) {
// Get popup window panel
var getSalesDataPopup = Ext.getCmp('salesDataDetailsPopup');
// Get chart component
var getSalesDataDetailChart = Ext.getCmp('salesDataDetailChart');
// Get updated store & redraw chart if it already exists
if (undefined !== getSalesDataPopup) {
// Get updated store
getSalesDataDetailChart.store = buildSalesDataDetailChartStore();

// redraw throws error after user closes window and clicks on another bar??
getSalesDataDetailChart.redraw(true); // Redraw chart
getSalesDataPopup.hide(); // Hide to rerender properly
}

var salesDataDetailsPopup = Ext.create('Ext.panel.Panel', {
id : 'salesDataDetailsPopup',
cls : 'salesDataDetailsPopup',
title : 'Details for: ' + barTitle,
closeAction : 'hide',
closable : true,
draggable : false,
width : 350,
minHeight : 425,
items : []
});

[...]



Firebug contents


Unexpected value NaN parsing y attribute.
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k... ext-all.js (line 38)


Unexpected value NaN parsing x attribute.
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k... ext-all.js (line 38)


TypeError: C.labels[(g.length - 1)] is undefined [Break On This Error] ...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...


Thanks!



------[EDIT]---------

To re-iterate re-draw works fine as long as the panel (popup) stays open, once it's closed and re-opened the TypeError occurs. Perhaps there is another way to close / re-open the panel that's more inline with the redraw function???

mkrakowski
29 Apr 2013, 1:26 PM
Using refresh() instead of redraw "sort of" works; it works great when the pop up is open and user clicks on other bars, however after it has been closed and re-opened (by clicking on bar) it only refreshes the bar chart after user mouses over the chart.

[CORRECTION] refresh does seem to update the labels, but does not redraw the bar (which apparently should not)

From Ext docs "Fires after the chart data has been refreshed."

mkrakowski
29 Apr 2013, 2:53 PM
Ok, I feel silly. The redraw() method was throwing an error because the panel was hidden. So show()'ing the panel before firing redraw() solved it.



// Get updated store & redraw chart if it already exists
if (undefined !== getSalesDataPopup) {
getSalesDataPopup.show(); // <------ solved the issue
getSalesDataDetailChart.store = buildSalesDataDetailChartStore();
getSalesDataDetailChart.redraw(); // Redraw chart
getSalesDataPopup.hide(); // Hide to rerender properly
}