CODEWITHSUNDEEP
highcharts
Fedor Alexandrovich
Fedor Alexandrovich

Reputation: 147

How to update new plotline values instead of removing and adding new ones in highcharts

I have a dynamic value for a quote. Horizontal line indicates the current position on a line chart. To move it i have to remove and add last one each time i receive new. I need to animate transition of this plotline, that's why it should not be removed and created again.

That's how it looks now:

                    chart.yAxis[0].removePlotLine('current-price');

                    chart.yAxis[0].addPlotLine({
                        value: parsedData.quote,
                        color: 'black',
                        width: 0.5,
                        id: 'current-price',

                            useHTML:true
                        },
                        zIndex:100
                    });

Upvotes: 7

Views: 7825

Answers (3)

Andy B
Andy B

Reputation: 328

we've all probably seen the following page(s), they dont really contain an answer.

https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines https://api.highcharts.com/highcharts/xAxis.plotLines

@Aviram had a good solution, but my example contains a lot more data , which causes slow redraws.

Ive found that the update() call does a redraw/rerender in some cases (source link), which can be very expensive and slow for large plots. i used the following code to update just the plot line, and it seems to update the plot line very quick. The reason i update plotLines and plotLinesAndBands, as in some cases when you redraw the lines/axis things need to match. 

[chart].xAxis[0].options.plotLines[0].value = newVal;   
[chart].xAxis[0].plotLinesAndBands[0].options.value = newVal;
[chart].xAxis[0].plotLinesAndBands[0].render();

The render function used above is called on redraw anyway (source link), so were not doing anything crazy here!

Upvotes: 2

Aviram
Aviram

Reputation: 553

you can update the options directly and then update the axis:

var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 10;
chart.xAxis[0].options.plotLines[0].value = newValue;
chart.xAxis[0].update();

fiddle: https://jsfiddle.net/aviram26/v8xte4hL/

Upvotes: 10

Mike Zavarello
Mike Zavarello

Reputation: 3554

Update: The solution below is best suited for Highcharts. During subsequent comments and clarification, I learned the original poster is using Highstock, which does not support the scatter plot type. I was not successful in adapting this solution to their code, which was an areaspline chart using data points updated in real time.

Rather than using a plot line, I'd suggest creating a new series that will serve as your line. That way, you can update the series as needed and it will pick up the native animations that Highcharts provides.

Here's a working example using a basic line chart: http://jsfiddle.net/brightmatrix/ws3e1wns/

Below is the code for the new series, which uses the scatter type. Note that I've disabled the markers, added a line width, and set showInLegend and enableMouseTracking to false so it won't be seen by your users as a "true" data series.

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        // scatter plot line to serve as moveable plot line
        type: 'scatter', 
        data: [[0,10],[11,10]], 
        lineWidth: 1, 
        marker: {
            enabled: false          // hide the markers (to show only the line)
        },
        showInLegend: false,        // hide in legend
        enableMouseTracking: false  // prevent user from interacting with this line
}]

Whenever you click the button in this fiddle, it will move the new series line up 10 points on the y-axis. To do so, I update both ends of the line:

// button handler
var chart = $('#container').highcharts(),
    y = 30;
$('#button').click(function () {
    y += 10;
    // update both ends of the scatter line
    chart.series[1].data[0].update([0,y]);
    chart.series[1].data[1].update([11,y]);
});

As you can see, the line animates when it is moved.

I hope this is helpful and useful for you!

Upvotes: 0

Related Questions