Customize Onclick Of Column Chart

[intapiuser]

In this post, we will show how to override the default click behavior of the column chart widget.  This same widget script should work for bar, line, and area charts as well.

Create a Sisense widget that contains the data points you want to pass on.  

From the widget editor, click the settings menu at the top right and open up the Script Editor.  Copy and paste the following script, swapping out the baseUrl variable to meet your criteria, then click save.

/*
Welcome to your Widget's Script.
To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
*/

// 
widget.on('render', function(widget,args){

 // Define the base url
 var baseUrl = 'http://www.google.com?q=';

 // Get the labels for the axis and/or break by
 var axisLabel = $$get(widget.metadata.panel(0).items[0], 'jaql.title', null),
     breakByLabel = $$get(widget.metadata.panel(2).items[0], 'jaql.title', null);
 
 // Define a click handler
 function wasClicked(event){
 
  // Build the link
  var url = baseUrl + axisLabel + '=' + this.category;

  // Is there a break by field too?
  if (breakByLabel){
    url += ', ' + breakByLabel + '=' + this.series.name;
  }

  // Open the url in a new tab
  window.open(url,'_blank');
 }

 // Get a reference to the highcharts object
 var hc = widget.queryResult;

 // Loop through each data series
 hc.series.forEach(function(series){

  // Loop through each data point
  series.data.forEach(function(point){

   // Assign the event handler
   point.events = {
    'click': wasClicked
   }
  })
 })
})

Now, when you click on a specific bar/column it will open up the url you specified and pass along the selection  from the category/axis/break by panels.  The labels used to pass through come from the panel titles, similar to how the legend and tooltips are displayed.