Customize Onclick Of Column Chart
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.
Updated 02-09-2024
