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]]]
}
}]
style: Highcharts. Defaults to {"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"} .
The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array. Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.
A series is a set of data, for example a line graph or one set of columns. All data plotted on a chart comes from the series object. The series object has the structure: series: [{
Stock Tools is a Highcharts Stock module for building a GUI that enables user interaction with the chart, such as adding annotations, technical indicators or just for zooming in or out.
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);
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]]
]
}
}
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With