<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <div id="dashboard_div" style="margin: 1em">

    <table width=100%>
      <tr>
        <td width=40%>
          <div id="donutchart"></div>
        </td>
        <td>
          <div id="table_div" width=100%></div>
        </td>
      </tr>
    </table>
  </div>

  <script type="text/javascript">
    google.charts.load("current", {
      packages: ["corechart"]
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Immediate Repairs', 321681],
        ['Replacement Reserves', 13923920],
        ['Long-Term Items', 14018951]
      ]);
      var options = {
        colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
      };
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
</body>

</html>

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['table']
    });
    google.charts.setOnLoadCallback(drawTable);

    function drawTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Category');
      data.addColumn('string', 'Year');
      data.addColumn('string', 'Estimated Cost');
      data.addRows([
        ['Immediate Costs', '0', '$321,681'],
        ['Replacement Reserves', '1-10', '$13,923,920'],
        ['Short-Term Total', '0-10', '$3,477,624'],
        ['Long-Term Items', '11-19', '$14,018,951'],
        ['Long-Term Total', '0-19', '$28,264,552'],
      ]);
      var table = new google.visualization.Table(document.getElementById('table_div'));
      // var formatter = new google.visualization.BarFormat({width: 100});
      // formatter.format(data, 1); // Apply formatter to second column
      table.draw(data, {
        allowHtml: true,
        showRowNumber: false,
        width: '100%',
        height: '100%'
      });
    }
  </script>
</head>

<body>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js
  2. https://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.6.0/mootools-more.js