Actually, I have a very specific requirement. I am looking to be able to create charts that have a drop down menu with 5 possible selections (or) say 5 links and when we click each link, it takes us to different column charts. Is this possible with highcharts cloud?
This! Same container and only want the data to change.
Code: Select all
menuItems: ["first", "second", "third"]
Code: Select all
menuItemDefinitions: {
first: {
onclick: function() {
var chart = this;
chart.series[0].setData([5, 4, 3, 6, 5]);
},
text: 'First data'
},
.
.
Code: Select all
Highcharts.merge(true, options, {
exporting: {
buttons: {
contextButton: {
menuItems: ["first", "second", "third"]
}
},
menuItemDefinitions: {
first: {
onclick: function() {
var chart = this;
chart.series[0].setData([5, 4, 3, 6, 5]);
},
text: 'First data'
},
second: {
onclick: function() {
var chart = this;
chart.series[0].setData([14, 12, 21, 17, 22]);
},
text: 'Second data'
},
third: {
onclick: function() {
var chart = this;
chart.series[0].setData([1, 5, 1, 5, 1]);
},
text: 'Third data'
}
},
}
});
Code: Select all
chart: {
events: {
render: function () {
var chart = this;
chart.renderer.button('First data', 50, 10, function () {
chart.series[0].setData([5, 3, 4, 5, 2]);
}).add()
chart.renderer.button('Second data', 150, 10, function () {
chart.series[0].setData([14, 12, 21, 17, 22]);
}).add()
chart.renderer.button('Third data', 250, 10, function () {
chart.series[0].setData([1, 5, 1, 5, 1]);
}).add()
}
}
},