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

Question

There is a piece of hardware that records data. I can call an API to get the stream of data via cURL. It records a new row of data every seconds. I would like to stream this data and present it in a line chart over time. With PHP and maybe AJAX. I would like to see a moving chart in the browser refreshing the browser in every seconds or using Ajax. What kind of tools do I need? What is the best way of doing this?

Thank you, Everybody these are really useful things. At the moment I'm struggling to get the data from the hardware. I can reach the data via an interface which is written like this:

192.168.150.130:2345/realtime

Then I can see in the browser this:

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

These are recorded data I can't get it from the URL. I would like to save it or live stream it somehow.

Answer 1

I suggest you to use Google Charts's Line plot . See this jsFiddle example of how to add data automatically . This is simple as using the data.addRow([ DATA_INDEX, VALUE_1, VALUE_2, ... ]);

This use jQuery for plot initialization and "click" event. You'll have to make a loop in order to retrieve data and add it to the plot.

Answer 2

Any of the various JS chart libraries out there should be able to present a line chart for you via loading data up 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 plenty more. Just find one that works best for you.

To run the ajax call that refreshes the charts every x-seconds, use something like this:

Call jQuery Ajax Request Each X Minutes

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