<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', 37505],
['Replacement Reserves', 3440119],
['Long-Term Items', 1907789]
]);
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', '$37,505'],
['Replacement Reserves', '1-10', '$3,440,119'],
['Short-Term Total', '0-10', '$3,447,624'],
['Long-Term Items', '11-19', '$1,907,789'],
['Long-Term Total', '0-19', '$5,385,413'],
]);
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.