-1

I get some data using Node.js. And I have an HTML file with Google Chart. I want to send the info which I get in Node.js to the Google Chart in my HTML, so that when I open the page I can see the chart with info which I got in Node.js.

I don't have a clue how to do that. I need to show this data in the chart. How can I send this data from a js file to the chart in the HTML file?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
    
        var tableData = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     10],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
            ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(tableData, options);
      }

    </script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
    <script src="../app.js"></script>
</body>
</html>

enter image description here

JS

const express = require("express");
const request = require("request");
const https = require("https");
const app = express();


app.get("/", function(req, res){

    const url = "https://api.caw.sh/v3/covid-19/countries/ukraine?strict=true";
    
    https.get(url, function(response){
        console.log(response.statusCode);

        response.on("data", function(data){
            const covidData = JSON.parse(data); 
            console.log(covidData.cases);
        })
    })
    res.send("Success");
})


app.listen(3000, function(){
    console.log("Server is tunning on port 3000.");
})
David Buck
  • 3,752
  • 35
  • 31
  • 35
Владислав Горбаченко
  • 21
  • 4

2 Answers2

0

You don't need a server in that case.

JS file (in the jquery document.ready function)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(chatStart);
    function chatStart(){
      jQuery.get("https://api.caw.sh/v3/covid-19/countries/ukraine?strict=true", 
         function(data,status){
   
         const arrayData = JSON.parse(data);
          console.log(arrayData);
          drawChart(arrayData)
       })
    }


      function drawChart(chartData) {
    
        var tableData = google.visualization.arrayToDataTable(chartData);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(tableData, options);
      }

    </script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
    <script src="../app.js"></script>
</body>
</html>

Hope this could help you

RM-Digit
  • 94
  • 8
  • Thank you, but the thing is that i need to show this data in the chart. I have data and I have a chart. How can i send this data from js file to the chart in HTML file? – Владислав Горбаченко May 20 '21 at 09:39
  • You just need to put it on the HTML file inline script. The code updated. Please make sure that you modified the chardData based on your google chart style. – RM-Digit May 20 '21 at 15:43
0

So what you can do is have your google charts code inside a function which takes data as a parameter. Now call this function from your code with that data as input to the function.

Say your data in node js is an array of

chartData = [['Task', 'Hours per Day'],
          ['Work',     10],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]]

Call the function to generate your google charts.

drawChart(chartData);

Now in your function to generate google charts, using the chartData array,

function drawChart(chartData) {

    var tableData = google.visualization.arrayToDataTable(chartData);

    var options = {
      title: 'My Daily Activities'
    };

...

Something like this should help.

kb hithesh
  • 93
  • 8