How to make Highstock rangeselector buttons load new data?

Question

I am trying to create a website using django, displaying highstock (highcharts) graphs for different ranges of data. I am an advanced python user, though a beginner with javascript.

I want the buttons for the data ranges (1d, 1w, 1m, all) to each call a different url when clicked on. I have put the code below, as well as the documentation for rangeSelector buttons. In the example code I have attempted several variations of things I have found online, though none work. Any help is much appreciated!

rangeSelector: {
        allButtonsEnabled: true,
        buttons: [{
        type: 'day',
                count: 1,
                text: 'Day',
                events: {
                click: function () {
                return "https://0.0.0.0/daydata";
                }
                },
                dataGrouping: {
                forced: true,
                        units: [['day', [1]]]
                }
        }, {
        type: 'week',
                count: 1,
                text: 'Week',
                events: {
                click: function () {
                return "https://0.0.0.0/weekdata";
                }
                },
        },
        {
        type: 'month',
                count: 1,
                text: 'Month',
                click: function () {
                return "https://0.0.0.0/monthdata";
                },
                dataGrouping: {
                forced: true,
                        units: [['month', [1]]]
                }
        }, {
        type: 'all',
                text: 'All',
                events: {
                click: function (event) {
                return "https://0.0.0.0/alldata";
                }
                },
                dataGrouping: {
                forced: true,
                        units: [['month', [24]]]
                }
        }],
},

https://api.highcharts.com/highstock/rangeSelector.buttons https://api.highcharts.com/highstock/rangeSelector.buttons.events.click

Thank you!

Answer 1

You can use jQuery in events.click to fetch the data from an external API. Then update the chart with the new data and data grouping options.

  events: {
    click: function() {

      $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/new-intraday.json',
        function(data) {
          chart.series[0].update({
            data,
            dataGrouping: {
              forced: true,
              units: [
                ['week', [1]]
              ]
            }
          });
        });

      return false; // prevent further actions
    }
  }

Live demo: http://jsfiddle.net/BlackLabel/2mb4fypn/