JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<input type="button" id="edit" value="Edit Chart" />
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
</div>
JavaScript
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
for (var i = 0; i < 100; i++) {
data.addRow([i, Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)]);
}
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
},
chartView: {
columns: [0, 1]
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div'
});
function setOptions (wrapper) {
// sets the options on the chart wrapper so that it draws correctly
wrapper.setOption('height', 400);
wrapper.setOption('width', 600);
wrapper.setOption('chartArea.width', '80%');
// the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter
wrapper.setOption('animation.duration', 0);
}
setOptions(chart);
document.getElementById('edit').onclick = function () {
var editor = new google.visualization.ChartEditor();
google.visualization.events.addListener(editor, 'ok', function () {
chart = editor.getChartWrapper();
setOptions(chart);
dash.bind([control], [chart]);
dash.draw(data);
...