CODEWITHSUNDEEP
javascriptjqueryhighcharts
craig1231
craig1231

Reputation: 3877

Highcharts: How to set dataGrouping

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]]]
                }
        }]

Upvotes: 8

Views: 12925

Answers (3)

Alexander Dexler
Alexander Dexler

Reputation: 31

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]]
                    ]
                }
            }
        }
    });
}

Upvotes: 2

imsinu9
imsinu9

Reputation: 769

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

Upvotes: 0

SteveP
SteveP

Reputation: 19103

The API has a method to update the series (http://api.highcharts.com/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);

Upvotes: 4

Related Questions