use chart.js with node

#node #webdev #tutorial #chart

With nodeJS you can build a web server which can serve a service or a web app. For example:

var http = require('http');

//create a server object:
http.createServer(function (req, res) {
  res.write('Hello World!'); //write a response to the client
  res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

Chartjs makes it easy to get a graph of some values. Here a example in HTML embedded:

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>

You can dtermine the scale of the axis by:

 scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }

It can be usefull to bring the chart feature to nodeJS for evaluations.
You can integrate this in a nodeJS-server by using a string(_html) for the chart-Call it self.

showChart.js

const fs = require('fs');
var express = require('express');
var app = express();
var path = require('path');
var Chart = require('chart.js');
var result =[3,6,9];
const port = 3000;

app.get('/', function(req, res){
    let _resLine = 'Events: ' + result;
    console.log('show chart:');
    console.log(_resLine);

    _html = "<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>"+
    "<canvas id='bar-chart' width='800' height='450'></canvas>"+
    "<script>"+
    "var logChart = new Chart(document.getElementById('bar-chart'), {"+
    "type: 'horizontalBar',"+
    "data: {"+
      "labels: ['res1', 'res2', 'res3'],"+
      "datasets: ["+
        "{"+
          "label: 'calls',"+
          "backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f'],"+
          "data: ["+result[0]+","+result[1]+","+result[2]+"]"+
        "}"+
      "]"+
      "},"+
    "options: {"+
      "legend: { display: false },"+
    "scales: {"+
      "xAxes: [{ticks: {min: 0, max:10}}],"+
      "yAxes: [{ticks: {min: 0, max:5}}],"+
     "},"+
      "title: {"+
        "display: true,"+
        "text: 'Events '"+
      "}"+
    "}"+
    "});"+
    "</script>";

    res.send(_html);
});

app.listen(port);

run it with:
node showChart.js

check it on:
http://localhost:3000/

refer to:
https://www.w3schools.com/js/tryit.asp?filename=tryai_chartjs_scatter
https://nodejs.org/api/synopsis.html