Visualize streaming data in real-time using Plotly

One of the many powerful functionalities of Plotly API is extendTraces(). It enabes to plot real-time sensor data in your html page for example. Here is an example from plotly website.

For one of my projects, I wanted to use that functionality. In particular, I wanted to plot data from different sensors of a IOT project, and visualize the plots. I did not want all the plots on the same graph because if the sensors values are in different range, the visualization is useless.

For this demo, we consider 2 sensors. In order to simplify things, we will make the output of the sensors to be constant: sensor1 = 4 and that of sensor2 = 40. We consider 2 examples: with and without purging/refreshing the graph.

EXAMPLE 1: the data of the sensors are plotted without refreshing the graph

When the user click on the input box, the javascript function plot() is called, and generates the plot in the <div> with id=”graph”.

Try it now (click on any input boxes)

  • sensor 1
  • sensor 2

EXAMPLE 2: Refresh the graph everytime a different sensor is selected

In that case, we only need to add an additional line in the previous code, to purge the graph (**plotly.purge(“graph”))

  • sensor 1
  • sensor 2

Here you have it: a nice way to visualize real-time data from multiple sensors of a robot, sensors of a IOT project…