Controls and Dashboards2
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="chart1_div"></div>
<div id="chart2_div"></div>
<div id="filter_div"></div>
</div>
JavaScript
google.charts.load('current', {packages: ['corechart', 'controls']});
google.charts.setOnLoadCallback(controlsAndDashboards2);
function controlsAndDashboards2() {
var data = new google.visualization.DataTable();
data.addColumn('date', '日');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
function getRandomInt(min, max) {
return Math.floor( Math.random() * (max - min + 1) ) + min;
}
for (var day = 1; day < 30; ++day) {
var date = new Date(2015, 0 ,day);
data.addRow([
date,
getRandomInt(0, 200),
getRandomInt(0, 200)
]);
}
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var chartRangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'ComboChart',
chartOptions: {
colors: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)'
],
height: 70
}
}
}
});
var dogs = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart1_div',
options: {
height: 80,
hAxis: {
textPosition: 'none'
},
vAxis: {
title: 'dogs'
},
colors: ['rgb(255, 99, 132)'],
tooltip: {
trigger: 'selection'
},
axisTitlesPosition: 'in'
},
view: {
columns: [0, 1]
}
});
var cats = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart2_div',
options: {
height: 80,
hAxis: {
textPosition: 'none'
},
...