Using Plotly.js and Node.js to get and plot data

Question

I'm trying to create a simple webpage which gets data from a microcontroller (MSP432) and plots it on a graph in real time.

I have researched and I'm currently using plotly.js and html to create the graph. I currently have a graph that updates itself with random data in realtime.

I have attached the code for the page below.

I now want to stream the data in, and I have looked at node.js and in particular the serialport library. I think I have installed the serialport npm.

The part where I'm confused is how does the node.js code fit in with my html/plotlyjs index file?

I have never used javascript before. It's my first time with nodejs especially, so I'm confused. Should I just put it inside the <script> tag right in the getX() getY() function?

Also does anyone know how I can go about starting the nodejs code? I'm kind of lost.

This is my index.html file:

     <!DOCTYPE html>

     <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <script src="plotly.min.js"></script>
         <meta charset="utf-8" />
         <title>My Plot Page</title>
    </head>
    <body>
         <p>Plotly plot:</p>
         <div id="chart1"></div>
         <script>
            var counter = 0;
            function getX() {
             counter++;
             return counter;
            }
            function getY() {
             return Math.random();
            }
            Plotly.plot('chart1', [{
             x: [getX()],
             y: [getY()],
             type: 'line'
            }]);
            setInterval(function () {
              Plotly.extendTraces('chart1', { x: [[getX()]] , y: [[getY()]] }, [0])
    }, 200);
         </script>
    </body>
    </html>

How does you micro-controller send the data you want to plot — Bosco
– Bosco, Commented Jul 8, 2019 at 22:21
Please comment if the provided answers are inadequate or upvote/accept a provide answer to signal to other people what the chosen solution is — Tarick Welling
– Tarick Welling, Commented Jul 12, 2019 at 17:14

Tarick Welling · Accepted Answer · 2019-07-09 08:13:28Z

Node.js is an open source server environment. It is used to host a webserver and can't be run inside the webbrowser. It can be used to read serial port data and send it to the connected clients.

An example setup would be as below:

---------------------------------------------------------------------------
| MSP432              node.js server                  web page in browser |
|   M <==================>  N  <===========================>  W           |
|           serial                       websockets                       |
---------------------------------------------------------------------------

The nodejs server (N) reads the data from the serial port and manages the MSP432 (M). The server (N) also hosts a webserver (using expressjs) and opens a websocket with the connected webpage (W) to transfer new data. An easy to use websocket library is socket.io.

A simple nodejs webserver can be created by doing:

express --view=pug <your application name>

please note that ejs can also be used instead of pug

ajax can also be used instead of websockets

DanyAlejandro · Accepted Answer · 2019-07-08 22:46:07Z

From experience (I work with data visualization systems), I can tell you Plotly might not be the easiest way to plot real-time data. It can do it for sure, but what it does is re-render the whole plot for every new point, which considering the data structure is not the most efficient method and looks a bit unnatural when updating.

In your use case, I would recommend this plugin instead: http://smoothiecharts.org/ it's lightweight, free, and "smooth". Read the "10 minute tutorial" on their website and you're good to go.

Summarizing, to each smoothiecharts timeseries, you want to use the append() method to add each new data sample. You can call this using a setTimeInterval() JavaScript method to get the value from... a URL (making an AJAX GET request). You want to create a URL that will always return the latest reading from your sensor, and for this you'll need to create a local webserver.

This is where your NodeJS application fits in: Create a simple NodeJS server with a GET method that returns the latest reading from your device. Something like this is enough to return simple content like a number: https://www.tutorialspoint.com/nodejs/nodejs_first_application , you could print a random number first and work on it until it works before continuing.

The hardest part here though is to get your microcontroller's readings into the NodeJS application. I don't know the specifics of the MSP432 or how you're connecting to it, but usually you can write a C script that reads the latest value from it and prints it to the console.

If you manage to do this, you can use the following NodeJS code to execute your C program and read its console output:

var exec = require('child_process').execFile;
var path = 'c:\yourprogram.exe';
var fun = function() {
   exec(path, function(err, data) {  
        console.log(err)
        console.log(data.toString());                       
    });
}
fun();

You can easily tweak that code into a function that updates the NodeJS variable that your server returns, and run it in a loop every X milliseconds.

And that would be your full visualization system.

Collectives™ on Stack Overflow

Using Plotly.js and Node.js to get and plot data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related