I have a highstock graph with lots of data in it, I am able to define how the data can be grouped, but Id like the user to specify which data grouping to use and change dynamically between day, week, month etc.

So is it possible to have a button whereby a user can change how the data is grouped, if so how?

There are many undocumentated features, for example currentDataGrouping, but there's nothing to set the data grouping... that I can see any way...

series: [{
                type: 'column',
                name: title,
                data: data,
                dataGrouping: {
                    units: [['week', [1]], ['month', [1]]]
                }
        }]

I have a highstock graph with lots of data in it, I am able to define how the data can be grouped, but Id like the user to specify which data grouping to use and change dynamically between day, week, month etc.

So is it possible to have a button whereby a user can change how the data is grouped, if so how?

There are many undocumentated features, for example currentDataGrouping, but there's nothing to set the data grouping... that I can see any way...

series: [{
                type: 'column',
                name: title,
                data: data,
                dataGrouping: {
                    units: [['week', [1]], ['month', [1]]]
                }
        }]

• javascript
• jquery
• highcharts

3 Answers 3

The API has a method to update the series (http://api.highcharts./highcharts#Series.update()). e.g.

chart.series[0].update({ type: 'spline' });

You should be able to use this API call to modify any of the series attributes.

For instance, you could have two series objects defined, and update the chart to use the one you want on a button click:

var seriesWeek = {
            type: 'column',
            name: title,
            data: data,
            dataGrouping: {
                units: [ ['week', [1] ] ]
            }
    }

var seriesMonth = {
            type: 'column',
            name: title,
            data: data,
            dataGrouping: {
                units: [ ['month', [1] ] ]
            }
    }

chart.series[0].update(seriesWeek);

I have always exactly one timeseries, so this approach works for me (no need to update each timeseries manually):

self.myChart = new window.Highcharts.stockChart(pChartDivContainer, {
        title: {
            text: 'My title'
        },
        rangeSelector: {
            enabled: true
        },
        plotOptions: {
            series: {

                dataGrouping: {
                    approximation: 'ohlc',
                    units: [
                        ["minute", [1]]
                    ],
                    forced: true,
                    enabled: true,
                    groupAll: true
                }

            }
        }
    }, function (chart) {
        self.onChartReady();
    });

After that it's easy to change the unit:

self.setCandleInterval = function (pUnit, pInterval) {
    self.myChart.update({
        plotOptions: {
            series: {
                dataGrouping: {
                    units: [
                        [pUnit, [pInterval]]
                    ]
                }
            }
        }
    });
}

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