How can I transfer current data and present it in a line chart using PHP, cURL, ajax

Question

There is hardware that records data. I can call api to get the data stream through cURL. It writes a new line of data every second. I would like to convey this data and present it in a line graph over time. With php and possibly ajax. I would like to see a moving chart in the browser, updating the browser every second or using Ajax. What tools do I need? What is the best way to do this?

Thank you, all these are really useful things. At the moment, I'm struggling to get data from the hardware. I can get the data through an interface that is written as follows:

192.168.150.130:2345/realtime 

Then I see the following in the browser:

 DM_NumLogChans=5 DM_NumDataModes=1 DM_LogicalChan=1 DM_ChanType=SEQUENTIAL DM_NumDims=2 DM_DataMode=1 DM_DataModeType=TIMHIS DM_AxisLabel.Dim1=Time DM_AxisLabel.Dim2=Value DM_AxisUnits.Dim1=secs DM_AxisUnits.Dim2=microstrain DM_SampleRate=1.000000 DM_TimeBase=0.0 DM_ChanName=bridge_1 DM_UserMin=-583.220764 DM_UserMax=940.916199 DM_Start= -439.779 -391.875 -680.114 1001.37 0 -442.068 -396.62 -680.945 1001.37 0 -443.571 -399.705 -680.639 1001.37 0 -445.598 -404.848 -684.662 1001.37 0 

This is the recorded data that I cannot get from the URL. I would like to save it or transform it somehow. Sorry for the bad english.

Answer 1

I suggest you use the Google Line plot graphics. See this jsFiddle example for automatically adding data . It's just like using data.addRow([ DATA_INDEX, VALUE_1, VALUE_2, ... ]);

This is using jQuery to initialize the parcel and click event. You need to do a loop to get the data and add it to the graph.

Answer 2

Any of the various JS chart libraries out there should be able to present a line chart for you by loading data through ajax calls. Here are a few:

http://www.fusioncharts.com

http://www.chartjs.org

http://www.jscharts.com

http://www.amcharts.com

... and there are many more. Just find the one that best suits you.

To start an ajax call that updates the charts every x seconds, use something like this:

Call jQuery Ajax Request Every X-Minutes

Also, take a look at this answer on the amCharts forum: http://www.amcharts.com/forum/viewtopic.php?id=12625