JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard_div">
<div id="control_div"><!-- Controls renders here --></div>
<div id="line_div"><!-- Line chart renders here --></div>
<div id="table_div"><!-- Table renders here --></div>
</div>
JavaScript
google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);
function createTable() {
// Create the dataset (DataTable)
var myData = new google.visualization.DataTable();
myData.addColumn('date', 'Date');
myData.addColumn('number', 'Hours Worked');
myData.addColumn('number', 'Hours sleep');
myData.addRows([
[new Date(2014, 6, 12), 9, 8],
[new Date(2014, 6, 13), 8, 7],
[new Date(2014, 6, 14), 10, 9],
[new Date(2014, 6, 15), 8, 7],
[new Date(2014, 6, 16), 0, 1]
]);
// Create a dashboard.
var dash_container = document.getElementById('dashboard_div'),
myDashboard = new google.visualization.Dashboard(dash_container);
// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
'filterColumnLabel': 'Date'
}
});
// Table visualization
var myTable = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table_div'
});
// Bind myTable to the dashboard, and to the controls
// this will make sure our table is update when our date changes
myDashboard.bind(myDateSlider, myTable);
// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType' : 'LineChart',
'containerId' : 'line_div',
'options': {
'title': 'Donuts eaten per person',
'series': {'0': {axis: 'Temps'}, '1': {axis: 'Daylight'}},
},
});
// Bind myLine to the dashboard, and to the controls
// this will make sure our line chart is update when our date changes
myDashboard.bind(myDateSlider, myLine );
myDashboard.draw(myData);
}