Nsryjdtyk

I am trying to dynamically update Chart.js graph with data coming from a web server via fetch() request e.g.

res.send({myData: data});

Problem is: res.send() deletes the pug template on the browser. What is the best way to populate the chart with fetch() response while rendering the template on screen?

index.js - NODE API

var express = require('express');

var router = express.Router();



/* GET home page. */

router.get('/', function(req, res, next) {



  res.render('index', { title: 'Express' });

});



router.post('/', function(req, res, next) {

  if(req.body.name) {

    console.log(req.body.name);

    data = [100, 200, 150, 100];

  } else {

    data = [0, 0, 0, 0];

  }



  res.send({myData: data});

  // res.render('index', { graph_data: data });



});







module.exports = router;

myscript.js - client script with ajax request

// make an ajax fetch request to the server for graph data and populate it.

document.getElementById("form").addEventListener("submit", function(event) {



    // get for inputs to send to server

    let name = document.getElementById("form-name").value;

    console.log("fetch...");



    // event.defaultPrevented();    

    // give endpoint, and create a request to send

    fetch("/", {

        method: 'POST',

        headers: new Headers(),

        body: JSON.stringify({ name: name})

    }).then(function(response) {

            console.log("response returned..")

            return response.json();

        }).then(function(myJson) {

            console.log("populated data.")

            populateGraph(myJson);

    });



});



console.log("populated data.")







var ctx = document.getElementById("myChart");



function populateGraph(myJson) {

    var myChart = new Chart(ctx, {

        type: 'bar',

        data: {

            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

            datasets: [{

                label: '# of Votes',

                data: [0, 0, 0],

                backgroundColor: [

                    'rgba(255, 99, 132, 0.2)',

                    'rgba(54, 162, 235, 0.2)',

                    'rgba(255, 206, 86, 0.2)',

                    'rgba(75, 192, 192, 0.2)',

                    'rgba(153, 102, 255, 0.2)',

                    'rgba(255, 159, 64, 0.2)'

                ],

                borderColor: [

                    'rgba(255,99,132,1)',

                    'rgba(54, 162, 235, 1)',

                    'rgba(255, 206, 86, 1)',

                    'rgba(75, 192, 192, 1)',

                    'rgba(153, 102, 255, 1)',

                    'rgba(255, 159, 64, 1)'

                ],

                borderWidth: 1

            }]

        },

        options: {

            responsive:true,

            scales: {

                yAxes: [{

                    ticks: {

                        beginAtZero:true

                    }

                }]

            }

        }

    });



    myChart.data.datasets[0].data.push(myJson.myData);

    myChart.update();





}

Any ideas on how to make this work?

I don't see the code that actually gets rendered by the server, but if your form contains action attribute, then you need to prevent its default behaviour on submit. To do that, modify your 'submit' event listener callback:

document.getElementById("form").addEventListener("submit", function(event) {

    event.preventDefault(); // don't execute default browser's behaviour



    // rest of your code goes here

});

Now there might be multiple reasons on why your chart does not update. For starters, instead of using res.send() in your node API, use res.json() - this way your server will send data in json format. Also, I would move this line...

var ctx = document.getElementById("myChart");

...to the populateGraph function to make it self sufficient.

Finally, keep in mind that by using

myChart.data.datasets[0].data.push(myJson.myData);

You're actually adding values to the dataset's data array. So values for the labels on your chart will be:

Red: 0

Blue: 0

Yellow: 0

Green: 100

Purple: 200

Orange: 150

Last number (100) will not get assigned to any label.

On the side note, POST request should be used to send data for the server, not to obtain them. I know that you're probably just experimenting with express, but when you design an API, it should serve the data as a response to the GET request.

For the future, it's good idea to keep the server rendering the page and the API separate.

You could either have two separate backend endpoints for JSON and a regular templates, or send "Content-type": "application/json" header in you client-side fetch and then check for this header in the server-side code. If the header is present, you can then response with res.json() instead if res.send()