I'm able to fire my own JavaScript function when the user clicks on a node in the outer ring of a multi-level pie chart. I use this to show some more data in a separate panel on the page. The 'linkProvided' in the following code contains an integer as an identifier for the content to be displayed. The 'link' is a property of the chart's 'category' object that I'm able to populate for each node.
As you can see below the comment in the my code I'm desperately trying to stop the default FusionCharts action that reloads the page. I *do* have to use the 'link' property as there's no other property available to provide a reference to the further content. I *don't* want the default behaviour!
Can anyone see a way to stop the page reload, please?
<script type="text/javascript">
FusionCharts.ready(function () {
var fpChart = new FusionCharts({
type: "multilevelpie",
renderAt: "chart-container",
id: "fpChart",
dataFormat: "jsonurl",
dataSource: 'http://myurl/',
"events": {
"linkClicked" : function(eventObj, dataObj) {
showPanel(dataObj.linkProvided);
/* can't stop the page reload ... */
eventObj.cancelled = true;
eventObj.preventDefault();
eventObj.stopPropagation();
}
}
});
fpChart.render();
});
function showPanel(id) {
$('.panel').collapse('show');
var link = window.location.href + 'MyUrl/' + id;
$('.panel').load(link);
}
</script>
