Gap between datapoints

[Lars_]

I wonder if any one of you can help me out with a problem that occurs in one of my charts based on CanvasJS. On page load I am loading a huge set of data into a CanvasJS chart. I also immediately make a connection to a Websocket which adds data ‘realtime’ to the chart. This works well, except for the fact that a small gap occurs between the data that’s been loaded on server request and the data being added by the web socket.

The web socket takes a few seconds to initialise, and the gigantic dataset takes a few seconds to load into the chart. It’s a real struggle to keep the load-time fast as well as the data point’s connected. The best result so far is by starting the web socket as soon as possible, and then load the big initial dataset. This still results in a minor gap of 1 to 3 seconds. Which isn’t necessarily a problem if the lines would just connect to each other. So the last point of the big dataset would just connect to the first datapoint added by the web socket.

The attached screenshot to demonstrate the ‘gap’. I’ve gone through the manual multiple times looking for a solution, I’m hoping someone might have any suggestions?

[Vishwas R]

@lars_,

CanvasJS Chart just renders the data that you pass in chart-options. And in case of line charts, it draws a continuous line to connect all the non-null datapoints present in a dataseries. A gap / discontinuity in the line can be observed only when there is a null datapoint with the dataseries. You can set connectNullData to true to make it continuous by connecting line between non-null data.

If this doesn’t solve in your scenario, kindly reproduce the scenario either in JSFiddle with dummy data & share it with us (or a sample project & share over Google-Drive/Onedrive) so that we can run it locally to debug & understand it better and help you out.

—
Vishwas R
Team CanvasJS

[Lars_]

Thanks for the suggestions, connectNullData seems like a perfect solution. I can’t believe I’ve overlooked it in the docs.