Highcharts official support forum

I would like to create a real time chart. Every one second there will be a new data row added to database on server, but this may be delayed. I want the chart to keep scrolling even if new data is not available and then fill in the missing data when it arrives. The server database may contain many days of information, normally the user would see a chart of the last 15 minutes. They would be able to click buttons to change to other ranges like 5 min, 10 min, 30 min, 60 min. The user could also use a scrollbar to scroll back and see what had happened earlier. After looking at the history the user needs to be able to continue viewing the live data.

This seems like a complex task with many details. I have been working at trying to get this going for several days and I can get it close but then there is always one of the requirements that doesn't work. I have no problems with retrieving and correctly formatting the data from any time range from the server. I don't think it's realistic to get the entire database from the server and rather I am thinking of just getting the data for the current chart view.

Could anyone give me an outline of how to go about making this work.

Hi,

Welcome to our forum and thanks for contacting us with your question!

You can try to do it like in the demo. Every second add an empty point (line 29) which will move the chart and in the meantime when data comes from the server overwrite the chart data (line 16).

Demo: https://jsfiddle.net/BlackLabel/oc8vmf6g/

Let me know if that was what you were looking for!
Best regards!