Using the highcharts 4 JavaScript library allows for customizing chart buttons.
Check out a chart with custom buttons
To customize buttons in highcharts, you can push button objects into an array and include this array in the Highcharts configuration.
However, there seems to be an issue when accessing parameters attached to each function upon clicking the button.
The snippet of code below demonstrates how to create the array of buttons:
for (var i = 0; i < arr_papers.length; i++) {
var caption = arr_papers[i].caption;
var colid = arr_papers[i].colid;
buttons.push({
text: caption,
id: colid,
onclick: function () {
loadPerformanceBarChart(colid, caption);
}
});
}
This array is then included in the Highcharts configuration like so:
var options = {
chart: {
type: 'bar',
renderTo: 'bar_chart_stats'
},
title: {
text: 'Number of Students per Range'
},
exporting: {
buttons: {
contextButton: {
menuItems: buttons
}
}
},
.
.
.
.
One problem arises when calling the loadPerformanceBarChart function as the parameters colid and caption are always the last ones from the array. How to go around this?
Your insights are appreciated! Thank you.