Switching between many Highcharts using buttons or link text

Question

I originally wanted to display a lot of highcharts on my website in a side-by-side sort of configuration. Now I have instead been trying to include just one highchart on the sit

Answer 1

I would do it something like this - on button click, destroy the chart and build a new one in its place.

This example works on data and chart objects defined on the page, but you could instead, inside of this click event handler, fetch your external data, and your external chart options definition, based on the same key obtained from the clicked button.

  $(document).on('click', '.chart-update', function() {
    chart.destroy(); <-- destroys the current chart object
    $('#container').highcharts(chartOptions[$(this).data('chartName')]); <-- rebuilds a new chart
    chart = $('#container').highcharts(); <-- re-associates the 'chart' variable with the current chart object
  });

Fiddle:

• http://jsfiddle.net/jlbriggs/7ntyzo6u/