Using chart.js inside node.js

Question

I'm creating a site that gets live data from http://services.swpc.noaa.gov/text/ace-swepam.txt, and I want it to output this data to charts using chart.js. I've got the time, date (all fields) proton density, bulk speed and ion temperature in arrays, but I can't figure out how to use chart.js with this set-up. All I've managed to do successfully so far is

npm install chart.js

is that it in terms of set up?

I know I need to set up the charts and data in Javascript, and draw the canvas in HTML. But I don't know where to put the js/css. I've tried putting it inside script tags in the response.write() section of the code, but even using all single quotes inside double quotes, it's still messing up and telling me things are illegal.

I've also tried making a separate html page complete with all the Javascript and CSS I need, using fs.readFile, but then I don't know how to use my data arrays from node within the html.

 // console.log(year, month, day, time, statusno, proton, bulksp, iontemp);    
http.createServer(function (request, response) {
        //works but I can't pass values into it
         fs.readFile('index.html',function (err, data){
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(data);
        //Doesn't like it when I try adding more complicated code (like javascript etc)
      //  response.write('<html>\n<head>\n<title>Solar Activity</title>\n</head>\n<body>'+iontemp+'</body>\n</html>');
        response.end();
         });
    }).listen(8124);

potatopeelings · Accepted Answer · 2015-08-19 11:49:25Z

10

NOTE : You should be using some sort of template engine.

The below is just something to show that it's possible

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        // ** entire Chart.js library **
    </script>
    <style>
    </style>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: {{chartData}}
                }
            ]
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        var myNewChart = new Chart(ctx).Line(data);
    </script>
</body>
</html>

Notice the placeholder {{chartData}}. Also do note that you have to substitute in the actual script from the Chart.js file (you could link to the script file, but then you'll need a module that serves up static files)

example.js

var http = require('http');
var fs = require('fs');

http.createServer(function (req, response) {
    fs.readFile('index.html', 'utf-8', function (err, data) {
        response.writeHead(200, { 'Content-Type': 'text/html' });

        var chartData = [];
        for (var i = 0; i < 7; i++)
            chartData.push(Math.random() * 50);

        var result = data.replace('{{chartData}}', JSON.stringify(chartData));
        response.write(result);
        response.end();
    });
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

We simply substitute the placeholder with actual data.

answered Aug 19, 2015 at 11:49

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Leah Scott Over a year ago

Thank you! However when I try to load the page it's saying "</html> has no method 'replace'" - any ideas?

Leah Scott Over a year ago

In the console. Well terminal when I run the server.

potatopeelings Over a year ago

replace the var result line with var result = data.toString('utf8').replace('{{chartData}}', JSON.stringify(chartData));

Leah Scott Over a year ago

Thanks :) but I have to do this to like 4-5ish different arrays. How do I use this for multiple arrays?

potatopeelings Over a year ago

You construct the entire data object. So you'd have something like var data = {{data}}; and then swap out {{data}} with something you construct on the server side. By the way, like I said you should be using a templating solution or something else (my knowledge of nodejs is minimal at best) - Google is your friend.

|

Collectives™ on Stack Overflow

Using chart.js inside node.js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related