Ad

Nodejs Plotlyjs Works Individually But Not Together

Looks like there is 2 parts to the question.. part 1 was solved but ill leave it for future people

part1

So i am trying to stream data from my micro controller to a website with a real time graph.

I started with a simple index.html page with plotlyjs to create a real time graph using random numbers - it worked.

So then i created a index.js file and went ahead and started the code to stream the data in, i used nodejs express socketio and i managed to get the data displaying on the console in real time on localhost 3000.

So i linked my nodejs index.js page to my index.html page now i can see the title but i can no longer see the graph at all.

if i view my html page directly without index.js i can see the graph with the random numbers but if i view it using my real streaming data index.js file i can only see the title.

I am not sure why this is happening.

index.html file code

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="plotly.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <meta charset="utf-8" />
    <title>My Plot Page</title>
  </head>
 <body>
  <p>Plotly plot:</p>
  <div id="chart1"></div>
    <script>
      const socket = io();
      var counter = 0;
      function getX() {
          counter++;
          return counter;
       }

      function getY() {
           socket.on('msp432 : data', function (data) {
              return data.value;
           })
           return 0;
        }        

       Plotly.plot('chart1', [{
           x: [],
           y: [],
           type: 'line'
       }]);
       setInterval(function () {
           Plotly.extendTraces('chart1', { x: [[getX()]] , y: [[getY()]] }, [0])
    }, 500);


    </script>
  </body>
 </html>

Now i went to the console using inspect element and i could see all my results there but the it says an error :

    Script from http://localhost:3000/plotly.min.js was blocked due to mime type mismatch

    HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). GET - http://localhost:3000/plotly.min.js

    0: 'Plotly' is not defined

How would i fix this?

I can also display the index.js file on request i dont want the question to be too long

part 2

so now i can see a graph by using the cdn plotly link on the page using index.js but all i see is 0's.

I think its because of this part of the code:

      function getY() {
           socket.on('msp432 : data', function (data) {
              return data.value;
           })
           return 0;
        }  

it looks like it only returns 0 and not data.value. if i do console.log(data.toString()) it will display the correct numbers onto the console but it doesnt work like this right now

my index.js code:

 const express = require('express');
 const socketIO = require('socket.io');
 const http = require('http');

 const app = express();
 const server = http.createServer(app);
 const io = socketIO.listen(server);

 io.on('connection', function (socket) {
    console.log('a new socket connection');
 });


 app.get('/', (req, res, next) => {
   res.sendFile(__dirname + '/index.html');
 });

 const SerialPort = require('serialport');
 const myPort = new SerialPort('COM5', {
   baudRate: 9600
 })

 myPort.on('open', function () {
   console.log("opened the port")
 })

 myPort.on('data', function (data) {
   console.log('Data:', data.toString());
   io.emit('msp432 : data', {
      value: data.toString()
    });
  });

  server.listen(3000, () => {
    console.log("server on port ", 3000);
  })
Ad

Answer

Try loading it from their CDN:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Part 2:

Move the socket event handler outside the synchronous getY function:

    let yVal = 0;
    socket.on('msp432 : data', function (data) {
        yVal = data.value;
    })
    function getY() {
        return yVal;
    }        
Ad
source: stackoverflow.com
Ad