Question

107

Using chart.js inside node.js

rated 0 times [ 111] [ 4] / answers: 1 / hits: 30959 / 9 Years ago, wed, august 19, 2015, 12:00:00

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);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

danae

Add To Favorites

Follow

Total Points: 26

Total Questions: 97

Total Answers: 112

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 9 Years ago analiseb · Accepted Answer

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.