JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
</td>
</tr>
</table>
</div>
JavaScript
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 'Male', 12, 5],
['Elisa', 'Female', null, 7],
['Robert', 'Male', null, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control1',
dataTable: data,
options: {
filterColumnLabel: 'Age',
ui: {
labelStacking: 'vertical'
}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control2',
options: {
filterColumnLabel: 'Gender',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false
}
}
});
// Define a category picker control for the Name column
var categoryPicker2 = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control3',
dataTable: data,
options: {
filterColumnLabel: 'Name',
ui: {
label: 'Exclude these names',
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: true,
selectedValuesLayout: 'belowStacked'
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
chartType:...