CODEWITHSUNDEEP
javascriptjqueryhighcharts
wormyworm
wormyworm

Reputation: 179

Highcharts "click" range on load with jquery, or addSeries on load

I"m using afterSetExtremes event to retrieve min and max x and y coordinates. Then, I add this series upon range selection. The problem is the series is not shown upon load. The simplest solution would be to simulate a range select on chart load. Is this possible? If not, is it possible to add this same series upon load?

xAxis: {
        events: {
  afterSetExtremes: function(e) {
    var points = e.target.series[0].points,
            minPoint = points[1],
        maxPoint = points[points.length - 1]

    if(minPoint.y < maxPoint.y)
    {
    var series_color = 'green';
    }
    else{
    series_color = 'red';
    }
    chart.addSeries({       
    data:[{x:minPoint.x,y:minPoint.y},{x:maxPoint.x,y:maxPoint.y}],
    color: series_color,
    dashStyle: 'shortdot',
    id: 'trend'
});
while(chart.series.length > 3)
{
chart.get('trend').remove();
}
  }

}
    }

See jsfiddle to see how it's currently working: http://jsfiddle.net/kd3aLp6m/

Upvotes: 0

Views: 86

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

In load event you can use fireEvent method to trigger the afterSetExtremes event. Also, to increase performance, you can set the redraw parameter in addSeries metohd to false in all calls except the first one.

    chart: {
        ...,
        events: {
            load: function() {
                Highcharts.fireEvent(
                    this.xAxis[0],
                    'afterSetExtremes', {
                        redraw: true
                    }
                );
            }
        }
    },

Live demo: http://jsfiddle.net/BlackLabel/bdnho9uc/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts#.fireEvent

Upvotes: 1

Related Questions