JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="dashboard">
<div id="gradeFilter_div"></div>
<div id="schoolFilter_div"></div>
<div id="teacherFilter_div"></div>
<div id="entityFilter_div"></div>
<div id="rNumberRangeFilter_div"></div>
<div id="chart_container">
<div id="rBubble_div"></div>
<div id="hack_chart_div"></div>
</div>
<div id="rCandle_div"></div>
<div id="rColumn_div"></div>
<div id="rTable_div"></div>
</div>
CSS
#chart_container {
position: relative;
}
#rBubble_div {
z-index: 1;
}
#hack_chart_div {
position: absolute;
top: 0px;
z-index: 0;
}
JavaScript
function drawDashboard () {
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AukymWvA6LlzdHpwblVtSmU3ZXJOMGhUVFZiV3NnSkE&single=true&gid=0&output=html');
query.setQuery('SELECT A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// CategoryFilter for Grade
var gradeFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'gradeFilter_div',
options: {
filterColumnIndex: 3
}
});
// CategoryFilter for School
var schoolFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'schoolFilter_div',
options: {
filterColumnIndex: 16
}
});
// CategoryFilter for Teacher
var teacherFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'teacherFilter_div',
options: {
filterColumnIndex: 17
}
});
// CategoryFilter for Entity
var entityFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'entityFilter_div',
options: {
filterColumnIndex: 18
}
});
var numberSlider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'rNumberRangeFilter_div',
options: {
filterColumnIndex: 19
}
});
// create a...