JSFiddle - React, Tailwind, and code Playground
by heennkkee
HTML
<script src="https://www.google.com/jsapi"></script>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div>
<br>
<br>
</div>
<div id="TeamName"></div>
<div id="chart_div"></div>
<div id="pie_div"></div>
<div id="table_div"></div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {
'packages': ['controls', 'corechart']
});
// google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = new google.visualization.DataTable({
"cols": [{
"label": "Group",
"type": "string"
}, {
"label": "Teams",
"type": "string"
}, {
"label": "Month",
"type": "number"
}, {
"label": "Work hours",
"type": "number"
}, {
"label": "Training hours",
"type": "number"
}, {
"label": "Utilization",
"type": "number"
}],
"rows": [{
"c": [{
"v": "CLNTSV"
}, {
"v": "CSDelv"
}, {
"v": 7
}, {
"v": 2097.26
}, {
"v": 0
}, {
"v":...