Streaming with timestamp: Plotly.purge not functionning

plotly.js
1

Hi,
I have 2 inputs that show streamed data (single numbers) from 2 sensors. With Onclick event, I want to show the data in a graph: the function plot( ) is based on the plotly example here. When the page is refreshed, and I click on the <input> of sensor1 for example, the graph shows the sensor1 data as expected. However, if I then click on the of sensor2, the graph shows data from the 2 sensors alternatively, instead of showing the plot from the sensor2 alone. I tried placing Plotly.purge('graph') at the beginning of the function plot( ), but it does not make a difference. I 'd really appreciate some suggestions. Thanks. Below is the code:

<script>
function plot(elt){
        Plotly.purge("graph")
        var graph = document.getElementById("graph");
        var x_source = document.getElementsByName('t')[0];
        var x_init = Number(x_source.value) //initial value of the timestamp
        var data = [{
                      x: [0],
                      y: [Number(elt.value)],
                      mode: 'lines',
                      line: {color: '#80CAF6'},
                    }]

        Plotly.plot('graph', data);
        var cnt = 0;
        var interval = setInterval(function() {
            var update = {
                x:  [[(Number(x_source.value)-x_init)/1000]],
                y: [[Number(elt.value)]]
            }

            Plotly.extendTraces('graph', update, [0])
            if(cnt === 2000) clearInterval(interval);
        }, 100);
    }
</script>
    
<body>
<div id="graph"></div>
<ul id="sensors">
<li> <input class='value_telemetry' name="sensor1" onclick="plot(this)" value = "0"></li>
<li><input class='value_telemetry' name="sensor2" onclick="plot(this)" value = "0"></li>
</ul>
</body>
2

Where do you call Plotly.purge in your code?

3

@etienne, I added the Plotly.purge(). line It’s the 1st line in the functionplot() I tried with the purge command at the 1st line or at the last line of the plot() function, both failed.

4

Here is my solution: make interval a global variable and use clearInterval(interval) for subsequent plots.

<script>
plot_cnt = 0
function plot(elt){
  if (plot_cnt == 1){ clearInterval(interval)}
  else{ plot_cnt = 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])
      }, 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>       
<button onclick="clearInterval(interval)">Stop time</button>
</body>
</html>

Below you can visualize the results:

  • plot 1 (top) : interval is local variable as in the plotly example
    To generate this plot, I click on sensor1 (plot shows value=4 …as expected), and then click on sensor2: the line switches between the value of sensor1 (4) andthat of sensor2 (40)
  • plot2:interval is global variable and is cleared before each click
    click on sensor1 (plot shows value=4), and then click on sensor2: this time the line is steady at the value of sensor2. If one clicks back on sensor1, the line would drop to 4.
    Untitled1

Hope that helps others