Google Chart Listener Issue
So I've been stuck at this bug for a couple of hours. It's a google chart and I simply just added a listener to display another chart. it's like this:
function drawPieChart(data, id, settitle){
var data = google.visualization.arrayToDataTable([
['Numbers', '# of Billed'],
['#Billed', 10544],
['#Not billed and open', 7190],
['#Closed', 1009]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
title: 'Billed number distribution',
pieStartAngle: 100,
is3D: true,
};
var piechart = new google.visualization.PieChart(document.getElementById(id));
piechart.draw(data, {width: 600, height: 400, title: "Number of Found Distribution", legendTextStyle:{color:'black',fontSize:10}, vAxis:{title: settitle,textStyle:{color: 'black'}, textStyle:{fontSize:11}}, is3D:true
});
google.visualization.events.addListener(piechart, 'select', function(){
var selectedItem = piechart.getSelection()[0];
if (selectedItem.row == 0) {
drawBilledPieChart(data, 'bottom2', 'new one');
}
});
}
At beginning I thought it worked fine, since there's no problem displaying the second chart. Then I added the functionality of minimize/close the 2nd chart. Now if I close it, I can't bring it back up. It shows a js error that piechart.getSelection() is empty. So it has something to do with I close the widget window? Closing the window does nothing more than just hide the div. Tried click the chart second time, yep now without closing the window, it shows the same error. It has nothing to do with closing window. Somehow piechart.getSelection() just returns nothing, although through inspection chart does still exist.
Through some online search, someone was saying the referenced chart has probably changed. But in my inspection, it didn't. The property that displayed at console showed still the same.
Finally I found someone had exactly the same issue and it was actually because second click was "deselecting" the column. So piechart.getSelection() returns empty. If you clear the selection at the end of event listener like this:
google.visualization.events.addListener(piechart, 'select', function(){
var selectedItem = piechart.getSelection()[0];
if (selectedItem.row == 0) {
drawBilledPieChart(data, 'bottom2', 'new one');
piechart.setSelection(); //nulls out the selection
}
});
Then you can click the same chart repeatedly without any issues.
If I didn't stumble upon this answer, I probably won't be able to figure out the problem at all....
Reference:
https://groups.google.com/forum/#!topic/google-visualization-api/NyHpeLojcxo