ZingChart: Can I click on a pie chart node and open a URL?
To accomplish the drilldown feature using our API you will need to leverage the API event listeners like node_click. For a pie chart you could also use plot_click but the code in the event listener would look exactly the same. You will listen for the event and based on the plotindex you will re-direct the user to the location of your choice.
zingchart.node_click = function(e) {
switch(e.plotindex) {
case 4:
window.open('https://www.opera.com/', '_blank');
break;
case 3:
window.open('https://www.apple.com/safari/', '_blank');
break;
case 2:
window.open('https://www.mozilla.org', '_blank');
break;
case 1:
window.open('https://www.google.com/chrome/', '_blank');
break;
default:
window.open('https://www.microsoft.com/en-us/download/internet-explorer.aspx', '_blank');
break;
}
}
Example: https://demos.zingchart.com/view/F0M2OWRZ
Another way you could accomplish clicking on a node and re-directing to a url is using built in ZingChart attributes. In side of plot or each individual series object you would define a url and a target attribute. The %data-band is a custom token in ZingChart and is referencing the array defined above it.
"series" : [
{
"values" : [15, 21, 16, 14, 18, 21, 9],
"data-band" : ["Genesis", "Rush", "Pink Floyd", "King Crimson", "The Moody Blues", "Yes", "Emerson, Lake and Palmer"],
"url" : "http://www.google.com/#q=%data-band",
"target" : "_blank",
"background-color":"#0CF"
}
]
Example: https://demos.zingchart.com/view/FKTA3T4S