How to dynamically adjust dataGrouping and set variable time intervals for HighStock data (HighCharts)

Question

I am having quite a few problems getting HighStock to use dataGrouping so that it shows the correct unit when needed, I frequently hit runtime errors.

Background: I am loading in time series data with varying granularity based on the recency, so for metrics less than 8 hours, the granularity of the data is per minute, for any data up to 14 days, it's by hour, and for data beyond 14 days it's measured per day. I assumed dataGrouping could be used, but I am having a number of problems when explicitly changing the grouping (see http://jsfiddle.net/xckaxaf2/8/ for a complete example):

chart.series[0].update({ dataGrouping: { units: [ ['minute', [1]] ] } });

The issues I am having are:

• If I specify a dataGrouping of say units: [ ['minute', [1]], ['hour', [1]], ['month', [1]] ], I have no way of controlling when each type of grouping is used. This is a problem because if the extremes are set for a time that is before the 1 minute interval 8 hours data and it uses minute then the data is incomplete, and equally by default the groupings are not right when less than an hour. I need some explicit way of setting the grouping.
• If I change the dataGroupings programatically I get two errors: Uncaught TypeError: object is not a function(index):83, Highcharts.StockChart.chart.events.redraw and Uncaught TypeError: Cannot read property 'length' of undefined, jquery-1.9.1.js:747 jQuery.extend.grephighstock.js:259. You can see this error easily in the JSFiddle above by clicking on 24h or 1m.

Does anyone know how it's possible to work around these issues and set the dataGrouping interval dynamically based on the data being viewed within the extremes?

I have raised an issue at https://github.com/highslide-software/highcharts.com/issues/4050

Answer 1

As solution/workaround, you can wrap method responsible for dataGrouping, and set that option there: http://jsfiddle.net/xckaxaf2/9/

(function (H) {
    H.wrap(H.Series.prototype, "processData", function (c) {

        var chart = this.chart,
            dg = this.options.dataGrouping,
            currentUnits = dg.units[0][0],
            min = chart.xAxis[0].min,
            targetUnit = getUnitFromRangeStart(min);


        if (currentUnits !== targetUnit) {
            console.log('Changing interval from ' + currentUnits + ' to ' + targetUnit);
            /* Change grouping for all charts other than the navigator */
            dg.units = [
                [targetUnit, [1]]
            ];
        }
        c.call(this);

    });
})(Highcharts);

Just make sure you have set dataGrouping.forced option to true. So dataGrouping will be always used.