How to pass chart code to Node.js server?

O

Oleg Petrov2018-11-12 13:23:06

Node.js

Oleg Petrov, 2018-11-12 13:23:06

Started the local server localhost:5000
Using the code:

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/javascript' })
    res.end('START!);
}).listen(5000, () => console.log('Сервер работает'));

Now I’m trying to insert the code for drawing the graph using plotly instead of the START text, but when I go to localhost:5000, only HTML text is displayed without a graph, what am I doing wrong?

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="plotly.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
    <div class="wrapper">
        <div id="chart"></div>
        <script>
            function getData() {
                return Math.random();
            }  
            Plotly.plot('chart',[{
                y:[getData()],
                type:'line'
            }]);
            
            var cnt = 0;
            setInterval(function(){
                Plotly.extendTraces('chart',{ y:}, [0]);
                cnt++;
                if(cnt > 500) {
                    Plotly.relayout('chart',{
                        xaxis: {
                            range: [cnt-500,cnt]
                        }
                    });
                }
            },15);
        </script>
    </div>
    </body>
</html>

My code:

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html' })
    res.end(`
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="plotly.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
    <div class="wrapper">
        <div id="chart"></div>
        <script>
            function getData() {
                return Math.random();
            }  
            Plotly.plot('chart',[{
                y:[getData()],
                type:'line'
            }]);
            
            var cnt = 0;
            setInterval(function(){
                Plotly.extendTraces('chart',{ y:}, [0]);
                cnt++;
                if(cnt > 500) {
                    Plotly.relayout('chart',{
                        xaxis: {
                            range: [cnt-500,cnt]
                        }
                    });
                }
            },15);
        </script>
    </div>
    </body>
</html>
`);
}).listen(5000, () => console.log('Сервер работает'));

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Chernyshev, 2018-11-16
@Smeilz1

Your server issues everything correctly. But in your html file there is another js file connection: . Because HTML issues the web server at , the browser sends a request for that file to . But the server does not know that it needs to issue this file, all it can do is issue the same HTML for any request. There are two ways to solve the problem: either teach the server to issue this file, or use the CDN version. <script src="plotly.min.js"></script>http://localhost:5000http://localhost:5000/plotly.min.js