Home/ Questions/Q 8289233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T12:27:38+00:00

So I have the following code I want to embed in my website, the

  • 0

So I have the following code I want to embed in my website, the purpose of which is to display daily and monthly website metrics in tabular form.

I’m trying to mock the page up, but I am running into a roadblock: I can’t seem to find a way to render two different google charts using the google charts API.

I’m sure it’s an incredibly silly mistake that I’m just not seeing, but I’ve been looking into this for about an hour now and just can’t figure out how to display two tables.

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawDailyTable);
      function drawDailyTable() {
        var Dailydata = new google.visualization.DataTable();
        Dailydata.addColumn('string', 'Metric');
        Dailydata.addColumn('number', 'Number');
        Dailydata.addRows([
          ['Total Daily Unique Users',  {v: 462, f: '462'}],
          ['Total Daily Visits',   {v:6702,   f: '6,702'}]
        ]);
        var Dailytable = new google.visualization.Table(document.getElementById('table_div'));
        Dailytable.draw(Dailydata, {showRowNumber: true});
      }
    </script>


    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawMonthlyTable);
      function drawMonthlyTable() {
      var Monthlydata = new google.visualization.DataTable();
        Monthlydata.addColumn('string', 'Metric');
        Monthlydata.addColumn('number', 'Number');
        Monthlydata.addRows([
          ['Total Monthly Unique Users',  {v: 12875, f: '12,875'}],
          ['Total Monthly Visits',   {v:37980,   f: '37,980'}]
        ]);
        var Monthlytable = new google.visualization.Table(document.getElementById('table_div'));
        Monthlytable.draw(Monthlydata, {showRowNumber: true});
        }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I figured it out, in my drawtable functions where it says: document.getElementById('table_div'), I just renamed the ID for each respective table to document.getElementById('dailytable_div') and document.getElementById('monthlytable_div'), and then edited my body to look like this:

      <body>
    <div id='dailytable_div'></div>
    <div id='monthlytable_div'></div>
  </body>

    Problem solved!

    • 0