Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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]]]
                }
        }]
like image 576
craig1231 Avatar asked Mar 26 '13 10:03

craig1231


People also ask

What is the default chart type in Highchart?

style: Highcharts. Defaults to {"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"} .

What is plotOptions in Highcharts?

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.

What is series in Highcharts?

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: [{

What is Highcharts stock?

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.


2 Answers

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);
like image 78
SteveP Avatar answered Sep 29 '22 08:09

SteveP


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]]
                    ]
                }
            }
        }
    });
}
like image 29
Alexander Dexler Avatar answered Sep 29 '22 07:09

Alexander Dexler