Spline configuration results in 'thorny' lines

[henryng24]

Spline configuration results in ‘thorny’ lines

It’s been shown in a screenshot — does anyone have a solution for this?

[henryng24]

Can’t edit the above with more info, but if you use your demo here: https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/dynamic/realtime_line/

And add in ‘spline’ as the data type, updateInterval at 100, and dataLength at 15000, you can see that the line graph is wavy.

[Bivek Singh]

@henryng24,

It looks wavy because there are too many dataPoints which are updating with very short interval. Please increase updateInterval to avoid this effect.

[henryng24]

We use an update interval of 1000 and dataLength of 3600 because that is the granularity required for our data. If you hover over the peaks and valleys of the chart in your live demo, you’ll notice that some of the chart animation goes beyond the actual data point (there is animation but there is no data point associated with the animation). We have moved from spline, to line, to stepLine style as it resolves the issue for us, BUT, we prefer spline or line.

[henryng24]

[henryng24]

Added a link above

[Bivek Singh]

henryng24

We checked your image and doubt what chart type are you using as we don’t have border color for line or spline charts. It seems to be range Spline Area chart. Can you please create jsFiddle that reproduces the issue, so that we can look into it and resolve it?

[jolthoff]

Hi Bivek:

I am posting the same code that is in the example line graph editor into the JSFiddle with the data density and update interval that matches what we need in our application: http://jsfiddle.net/jolthoff/QwZuf/521/

You should be able to see excessive line rendering over and under the data points in the graph. Compare that effect to the waviness you are describing from frequent updates, for example if you take change the chart type to ‘stepLine’ in the jsFiddle, you should be able to see that waviness but you will not see pixels that appear to be above or below the the datapoints.

Our current solution is to use ‘stepLine’ chart for one second granularity data, but I want you to be aware of this rendering issue and know if there can be a fix for it.

[jolthoff]

Are you able to confirm the same rendering issue that we are seeing in the ‘line’ and ‘spline’ charts?

[Vishwas R]

@jolthoff,

We are looking into this. We will get back to you at the earliest.

[jolthoff]

Thanks Vishwas. We started using canvasJS for better realtime graphing performance and it has been great. Glad to see you are dedicated to the product!

[soudan]

I am using Spline and using the value maximum=100 to set the limit for Y axis.
However the max limit is not set and i can still see values above
please help

[Vishwas R]

@soudan,

axisY.maximum seems to be working fine. Please check for typo. If you still find the issue, kindly create jsfiddle so that we can look into the issue and help you out.

—
Vishwas R