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: the x axis is the timestamp.

For one of my projects, I wanted to use that functionality to visualize data from not just one but data from multiple sensors. In fact that is pretty straight forward if you want each sensor to have its own graph (Plotly shows the plots in a div object typically called “graph”) or if you want to plot the sensors data all together on the same graph. Actually, the later would be a bad idea if the values output by the sensors are in different range: the visualization becomes useless. A third possibility is to have the option to dynamically select the sensor and plot the data in the same graph object with or without clearing the graph from previous plots.

For this demo, let’s consider 2 sensors. In order to simplify things, the output of the sensors is chosen 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/clearing 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”.

Give it a try. Click on any input boxes, and switch back and forth between sensors. You can also change the value in the input box.

  • 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: 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, or whathaveyou.