Data grouping into weekly,monthly by user

问题:

I have a highstock line chart displaying daily and weekly stock prices for a given stock. Problem is when the data array is large enough the daily data points get "sampled" into weekly data points and weekly data points get sampled down to monthly data points.

Is there any way to set them by user to weekly,or monthly when needed.

Thanks in advance

回答1:

Check about dataGrouping.
You can set it to get sampled when needed like the example.
Or if you want to disable you can set it to false, like the code bellow or here:

series: [{
    type: 'candlestick',
    name: 'AAPL',
    data: arrayOfData,
    dataGrouping: {
        enabled: false
    }
}]

回答2:

You can change the dataGrouping.units at any time through each series' update() method:

//http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.units
var unit = 'week'; //'day' 'month'

//http://api.highcharts.com/highstock#Series.update
_chart.series.forEach(function(ser) {
    ser.update({
        dataGrouping: {
            units: [ [unit, [1]] ]
        }
    }, false);
});

_chart.redraw();

Example: http://jsfiddle.net/X5WbN/20/

回答3:

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