How to display the Map values in javascript file to Google charts html file

Question

I have a function and pushing some data into Map() and I want to display the values in the Map to google chart.

I'm relatively new to google chart and not sure How I can connect the Map in javascript file to google chart file in .html file.

Test.js

async function storeData()
{

fs.createReadStream('./output.csv').pipe(csv()).on('data', function(data){
              try {
                const temp2 = data.URL;

                    if(temp2.includes(temp))
                    {
                      console.log("Entered into IF...");
                      console.log(data.URL);
                      console.log(data.Duration);

                      if (myMap.has(temp)) {
                        // Key already exists, check value
                        if ( myMap.get(temp) < parseInt(data.Duration)) {
                          // Override key with new value
                           myMap.set(temp, parseInt(data.Duration));
                        }
                        else
                        {
                          console.log(myMap.get(temp) +" HIGHER NUMBER")
                        }
                      } else {
                        // Key doesn't exist, add it to the map
                         myMap.set(temp, parseInt(data.Duration));
                        
                      }
                    }
                }
             catch(err) {
                      console.error("ERROR");
               }
            }) 

return myMap;
}

Html file:

<!doctype html>
<html lang="en">
  <head>
      <style>
          #chart_wrap {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow:hidden;
}

#piechart {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:500px;
}
      </style>
    <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 data = google.visualization.arrayToDataTable([
            ['NETWORK API', 'Duration(MilleSeconds)'],
            ['LOGIN', 4101],
                  ['SEARCH', 650],
                  ['VIDEO PLAYBACK', 780],
                  ['AD VIDEO PLAYBACK', 1020],
                  ['CREATE PROFILE', 3200]
          ]);
      
          var options = {
            title: 'PRIME VIDEO - NetworK'
          };
      
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      
          chart.draw(data, options);
        }
      </script>
  </head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>

  
</html>

I want to get the data from myMap() and replace the below piece of code in the above html file:

           ['NETWORK API', 'Duration (MilleSeconds)'],
            ['LOGIN', 4101],
                  ['SEARCH', 650],
                  ['VIDEO PLAYBACK', 780],
                  ['AD VIDEO PLAYBACK', 1020],
                  ['CREATE PROFILE', 3200]
          ]);

Can someone assist me how can I achieve this?

How to display the Map values in javascript file to Google charts html file

0 Answers0