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. This is particularly useful for IOT projects. 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 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 use a single graph object, and dynamically write on that graph when a sensor is selected. Below, I propose 2 examples: read and plot the data in a unique graph object with or without clearing the graph off 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 sensor2 = 40. We then propose a solution with and without purging/refreshing the graph.
EXAMPLE 1: the sensors data is 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”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
<script src="js/plotly-latest.min.js"></script>
<script>
function rand() {
return Math.random();
}
// plot_cnt tells if function plot has been ran or not
// Onload plot_cnt = 0,
plot_flag = 0
function plot(elt){
if (plot_flag == 1){
clearInterval(interval)
}
else{
plot_flag = 1
}
var x_source = Number(elt.value);
var time = new Date();
var data = [{
x: [time],
y: [x_source],
mode: 'lines',
line: {color: '#80CAF6'}
}]
Plotly.plot('graph', data);
//Make interval a global variable
interval = setInterval(function() {
var time = new Date();
var update = {
x: [[time]],
y: [[x_source]]
}
Plotly.extendTraces('graph', update, [0])
//if(cnt != 0) clearInterval(interval);
}, 100);
}
</script>
<body>
<div id="graph"></div>
<ul id="sensors">
<li>sensor 1 <input class='value_telemetry' name="sensor1" onclick="plot(this)" value = "4"></li>
<li>sensor 2 <input class='value_telemetry' name="sensor2" onclick="plot(this)" value = "40"></li>
</ul>
</body>
</html>
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
1
2
3
4
5
6
7
plot_flag = 0
function plot(elt){
Plotly.purge("graph")
if (plot_flag == 1){
clearInterval(interval)
}
.......
- sensor 1
- sensor 2
Here you have it: a nice way to visualize real-time data from multiple sensors of a robot, of a IOT project, or whathaveyou.