Menu
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);
550
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.
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
