Can I click on a pie chart node and reference 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;
  }
}

 

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"
  }
] 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.