Search code examples
javascriptplotlyplotly.js

Javascript Plotly: only 2 out of 5 graphs updating

I’m new to Javascript and Plotly so apologies if this is a schoolboy error.

I have a webpage requesting 5 floats from a Bluetooth Low Energy device (Arduino Nano BLE 33 Sense), which are received. I then proceed to parse the floats, update the 5 data arrays and call Plotly.react. The floats are correctly parsed and the buffers updated (verified on the console.log). I have incremented the datarevision property in the layout information (which applies to all 5 graphs) but only graphs 1 and 3 are updated.

The browser is Chrome (for BLE support), in case that makes a difference. The URL is the local file:/// path. Can someone please advise what I’m doing wrong?

Jason

HTML (now edited to remove any BLE interaction):

<!DOCTYPE html>
<html>
<head>
  <title>Temperature monitor</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

    <button id="connectBtn">Connect</button>
    <div id="temp0"></div>
    <div id="temp1"></div>
    <div id="temp2"></div>
    <div id="temp3"></div>
    <div id="temp4"></div>
    <div id="temp5"></div>

    <script>

const connectBtn = document.getElementById("connectBtn");

const MAX_BUFFER_LENGTH = 64;

const temp1 = [];
const temp2 = [];
const temp3 = [];
const temp4 = [];
const temp5 = [];

var temp1Data =
{
    y: temp1,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
};

var temp2Data =
[{
    y: temp2,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
}];

var temp3Data =
{
    y: temp3,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
};

var temp4Data =
[{
    y: temp4,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
}];

var temp5Data =
[{
    y: temp5,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
}];

var allTempLayout =
{
    plot_bgcolor: '#111111',
    paper_bgcolor: '#111111',
    margin: {l:8,r:8,b:18,t:18},
    showlegend: false,
    datarevision: 0,
    yaxis:
    {
        'range': [0,120],
        'showticklabels':false
    },
    xaxis:
    {
        'range': [0,64],
        'showticklabels':false,
        'autorange': false,
        'showgrid': true,
        'zeroline': true,
        tickfont: {size: 8}
    }
}

async function connectSensors()
{
    setInterval(function() {
        if(temp1.length === MAX_BUFFER_LENGTH)
        {
            temp1.shift();
            temp2.shift();
            temp3.shift();
            temp4.shift();
            temp5.shift();
        }
        temp1.push(Math.random() * 100.0);
        temp2.push(Math.random() * 100.0);
        temp3.push(Math.random() * 100.0);
        temp4.push(Math.random() * 100.0);
        temp5.push(Math.random() * 100.0);

        allTempLayout.datarevision++;
        console.log("Plot " + allTempLayout.datarevision);

        Plotly.react("temp1", [temp1Data], allTempLayout);
        Plotly.react("temp2", [temp2Data], allTempLayout);
        Plotly.react("temp3", [temp3Data], allTempLayout);
        Plotly.react("temp4", [temp4Data], allTempLayout);
        Plotly.react("temp5", [temp5Data], allTempLayout);
    }, 1000);
}

connectBtn.addEventListener ( "click", async () => {
    try { connectSensors(); }
    catch (err) {
        console.log(err);
        alert("An error occured while fetching device details");
    }
});

Plotly.newPlot("temp1", [temp1Data], allTempLayout);
Plotly.newPlot("temp2", [temp2Data], allTempLayout);
Plotly.newPlot("temp3", [temp3Data], allTempLayout);
Plotly.newPlot("temp4", [temp4Data], allTempLayout);
Plotly.newPlot("temp5", [temp5Data], allTempLayout);

    </script>

</body>
</html>
Solution

  • Looking at your code, you declare var temp1Data = {...} as an object, while you declare var temp2Data = [...] as an array. Looks like changing the type to object should solve the problem.