Adjust Highcharts data grouping based on range selector

Question

Depending on the value of the highcharts range selector, I would like to change the data grouping. In my column chart, if one week is selected, there should be 7 bars, if one day is selected, there should be 24 bars, if one month is selected, there should be a bar for each day of the month.

There doesnt seem to be any way to supply a function inside the highchart configs to accomplish this, but I may be missing something.

My current plan was to handle a click event on the range selector to update the series data to contain the correct amount of points. But there may be a better way.

Thanks

Answer 1

There certainly are a bunch of options available in highstock for data grouping .

The primary one that you should look at is units . Here you can specify what kind of groups are allowed.

Top this up with groupPixelWidth and you have what you need, this width defines how small can a point in your chart be, if the number of points on the chart goes higher, the width per point decreases, once it goes below this threshold highcharts would force grouping. Keep this large enough to force grouping of next level, given you want not more than ~30 points on the screen.

dataGrouping: {
    units: [
        ['hour', [1]],
        ['day', [1]],
        ['month', [1]],
        ['year', null]
    ],
    groupPixelWidth: 100
}

@jsFiddle

Answer 2

We tried a Hack around this, where we used Highstock's (Splinechart) RangeSelector , Event and DataGrouping . On click of weekly rangeselectorButton we catch this event through setExtremes . Post catching the event approximate it to "sum". If you are using two series than iterate the object.

  events: {
         setExtremes: function (e) {
             if (e.rangeSelectorButton != undefined) {
                 var triger = e.rangeSelectorButton;
                 if (triger.type == 'week') {
                     $.each(this.series, function (index, obj) {
                         obj.options.dataGrouping.units[0] = ['week', [1]];
                     });
                 } else if (triger.type == 'day') {
                     $.each(this.series, function (index, obj) {
                         obj.options.dataGrouping.units[0] = ['day', [1]];
                     });
                 }
             }
         }
     },

@ fiddle

Answer 3

Instead of using events you can combine range selector buttons with data grouping. See: "Data grouping by buttons" in the API https://api.highcharts.com/highstock/rangeSelector.buttons

Example: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/datagrouping/

    rangeSelector: {
        allButtonsEnabled: true,
        buttons: [{
            type: 'month',
            count: 3,
            text: 'Day',
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Week',
            dataGrouping: {
                forced: true,
                units: [['week', [1]]]
            }
        }, {
            type: 'all',
            text: 'Month',
            dataGrouping: {
                forced: true,
                units: [['month', [1]]]
            }
        }]
    },