Highcharts strange grouping behaviour

问题:

I am using the lazy loading method to load OHLC data. On the server side I use Python + MySQL and have 4 tables with OHLC data and time intervals of 5min, 1hour, 1day, 1month. Actually it works well, but unfortunately Highcharts displays the candlesticks in a strange way. Especially at the initial loading and when I switch between the zooms. Here are some examples:

1. Grouping on chart initialization

On initial Loading 6h, 24h & 3d is disabled and the candlesticks are wide apart.

Only after clicking then the first time 1w the chart displays as follows, which is correct and also the zoom buttons 6h, 24h & 3d are enabled now.

2. Grouping when clicking between the rangeSelector buttons

If I click then All inside the Range Selector I get the following display (this is wrong):

Only after clicking 1m and then back on AllI get the right display:

Does anybody know whats going on? Many thanks in advance! Here is the code:

<script>
$(function () {

    function afterSetExtremes(e) {

        var chart = Highcharts.charts[0];    

        $.getJSON('http://ipaddress/data3?start=' + Math.round(e.min / 1000) +
                '&end=' + Math.round(e.max / 1000), function (data) {

            chart.series[0].setData(data);
            chart.hideLoading();
        });
    }

    //Initially load the biggest data range
    $.getJSON('http://ipaddress/data3?start=1481897400&end=1486910100', function (data) {

        // Add a null value for the end date
        //data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);

        // create the chart
        Highcharts.stockChart('container', {
            chart: {
                type: 'candlestick',
                zoomType: 'x'
            },

            navigator: {
                adaptToUpdatedData: false,
                series: {
                    data: data
                }
            },

            scrollbar: {
                liveRedraw: false
            },

            rangeSelector: {
                buttons: [{
                    type: 'hour', 
                    count: 6,
                    text: '6h',
                    dataGrouping: {
                        forced: false,
                        units: [['minute', [15]]]
                    }
                }, {
                    type: 'hour', 
                    count: 24,
                    text: '24h',
                    dataGrouping: {
                        forced: false,
                        units: [['minute', [30]]]
                    }
                }, {
                    type: 'day',
                    count: 3,
                    text: '3d',
                    dataGrouping: {
                        forced: false,
                        units: [['hour', [2]]]
                    }
                }, {
                    type: 'day',
                    count: 7,
                    text: '1w',
                    dataGrouping: {
                        forced: false,
                        units: [['hour', [4]]]
                    }
                }, {
                    type: 'day',
                    count: 30,
                    text: '1m',
                    dataGrouping: {
                        forced: false,
                        units: [['day', [1]]]
                    }
                }, {
                    type: 'all',
                    text: 'All'
                }],
                inputEnabled: false,
                selected: 3    // Init loading button
            },

            xAxis: {
                events: {
                    afterSetExtremes: afterSetExtremes
                },
                //minRange: 3600 * 1000 // one hour
            },

            yAxis: {
                floor: 0
            },

            series: [{
                data: data,
                dataGrouping: {
                    enabled: true
                }
            }]
        });
    });
});

回答1:

Here is the solution:

1. No grouping on chart init

To solve the grouping problem at the initialization stage, use the following lines:

Highcharts.stockChart('container', {
    //.... your code ...
}, function(chart){
    chart.rangeSelector.clickButton(1);
    });

The problem here was that the selected button from chart options was not triggering afterSetExtremes event for xAxis.

1. No grouping when clicking the rangeSelector

To avoid Highcharts grouping the data when clicking between the rangeSelector buttons, set the chart as follows:

rangeSelector: {
    buttons: [{
        dataGrouping: {
            forced: false }
             }] }