Adjust data grouping based on range selection
Depending on the value of the high row range selector, I would like to change the grouping of the data. 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 row for each day of the month.
There seems to be no way to provide a function inside the highchart configs to accomplish this, but I might be missing something.
My current plan was to handle the click event on the range selector to update the series data to contain the correct number of points. But there may be a better way.
thank
source to share
Of course, there are several options available at highstock for grouping data .
The primary one that you should look out for is units
. Here you can specify which groups are allowed.
At the top with groupPixelWidth
and you have what you need, this width determines how small a point in your diagram can be, if the number of points in the diagram is above, the width per point decreases as soon as it drops below that threshold. Keep it large enough to force the next level to group if you want no more than ~ 30 dots per screen.
dataGrouping: {
units: [
['hour', [1]],
['day', [1]],
['month', [1]],
['year', null]
],
groupPixelWidth: 100
}
source to share
We tried a Hack around this where we used Highstock (Splinechart) RangeSelector , Event and DataGrouping . When the weekly rangeselectorButton is clicked, we will catch this event via setExtremes . The message that catches the event brings it closer to the "sum". If you are using two series than object iteration.
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
source to share