Performance of StripLine.set

[Robert Schnitzer]

Hi, I’m using StripLine.set() to show a vertical line on a line chart.
e.g.
this.chart.axisX[0].stripLines[0].set(name, value);
It works well, however, the line has to redrawn at a new position at a reasonably high rate, e.g. 30 Hz.
This is to animate moving the line along the chart x Axis.
The CPU usage seems very high to do these high rate calls to redraw striplines e.g. as compared to the trivial CPU used by animating a vertical line in a canvas.
Is there a peformant way to accomplish this?

[Shashi Ranjan]

@esieczka,

To move a line on axis based on mouse-movement you can use crosshairs. However, to update stripLines dynamically you can use the set method.

If you can create a JSFiddle with your use case and share it with us along with an example we can understand your scenario better and help you out?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle or an example helps us in figuring out the scenario better and help you out accordingly.

—
Shashi Ranjan
Team CanvasJS

[Robert Schnitzer]

Thanks Shashi, I will put together a JSFiddle and let you know when it is ready.

[Robert Schnitzer]

OK here is my example:

https://jsfiddle.net/2nmvafxu/25/

[Shashi Ranjan]

@esieczka,

The charts seem to be re-rendering every few milliseconds. Can you kindly brief us more about your exact requirement so that we can help you out with an appropriate approach?

—
Shashi Ranjan
Team CanvasJS

[Robert Schnitzer]

Thanks Shashi,
Our application displays medical ultrasound video clips (30-60Hz) clips, where a clip is typically a second long and thus some 30-60 video frames. A line chart is rendered next to the video. The chart renders time versus versus various medical measurments that have been made in the video image frames. So there are 30-60 x Axis points, and around a half dozen measurement curves (y data curves). So as the video plays, a vertical indicator line (stripline) should move in sycnroncity along the x axis, giving the user an temporal indication in the chart of the relative location of the currently displayed video frame in the clip.

Again, everything works fine, but the CPU usage is higher than we can accommodate, e.g. much higher than a line drawn in HTML canvas.

This is a lot to explain, let me know if that is not clear, I can send a screenshot or show a video if that helps.
regards,
Robert

[Shashi Ranjan]

@esieczka,

In the JSFiddle shared above, chart is being updated / re-rendered every 30 milliseconds. You may observe a slight increase in the resource usage as entire chart gets re-rendered.

—
Shashi Ranjan
Team CanvasJS