CODEWITHSUNDEEP
javascriptjqueryhighcharts
grepsedawk
grepsedawk

Reputation: 3411

X-axis range changes based on hidden Series

I have 2 Series on one graph. Only one series can show at a time but the hidden graph affects the range on the x-axis.

The data is dynamically generated via PHP but here is 2 fiddles to show what I mean:

Fiddle With Changed Scale and Hidden Data

Fiddle With removed Hidden Data and correct scale

This code snippet is to ensure that only one series can be shown at any given time. 

events: {
    show: function () {
        var chart = this.chart,
            series = chart.series,
            i = series.length,
            otherSeries;
            var seriesName = this['options']['name'];
            chart.yAxis[0].axisTitle.attr({
                text: seriesName
            });

        while (i--) {
            otherSeries = series[i];
            if (otherSeries != this && otherSeries.visible) {
                otherSeries.hide();
            }
        }
    }

I am not sure why the graph with the hidden data shows until 16:00 but the graph without any additional data shows until the last data point at 15:38

Upvotes: 1

Views: 536

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

It appears that Highcharts is taking into account the pointRange of the series with the largest pointRange (although it is hidden) and displaying the x-axis based on that. The range of your "Calls/Hour" series is 1 hour, so it makes sure that if that series had a point at the very end, it would still have room to show.

I'm not sure if there's any elegant way of solving this, but a bit of a "hack" in your case is to change the pointRange of all series to that of the currently showing one.

My crude implementation of this has three changes to your code:

  1. Your series that are visible: false by default also get pointRange: 1 so they don't disrupt the x-axis range for the only visible series.

  2. When the chart has been created we store the correct point range of each series for future reference, for example with the callback function:

    $('#callFrequencyGraph').highcharts({
    // Options...
}, function(event) {
    var series = this.series;

    // Store the correct point ranges
    for(var i = 0; i < series.length; i++) {
        series[i].update({
            historicalPointRange: (series[i].closestPointRange ? series[i].closestPointRange : 3600000)
        }, false);
        this.redraw();
    }
}

  3. Extend your events.legendItemClick function to update all series pointRange to that of the series which will be showing after the click is completed:

    legendItemClick: function() {
    if(this.visible){
         return false;
    }
    else {
        var series = this.chart.series;

        for(var i = 0; i < series.length; i++) {
            series[i].update({ 
                pointRange: this.options.historicalPointRange 
            }, false);
        }
    }
}

See this updated JSFiddle for the result of all these changes. Edit: jsFiddle Update for bug

Upvotes: 3

Related Questions