Controls and Dashboards
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="chart3_div"></div>
<div id="chart4_div"></div>
<div id="chart5_div"></div>
<div id="filter_div"></div>
<div id="chart6_div"></div>
</div>
JavaScript
google.charts.load('current', {packages: ['corechart', 'controls', 'table']});
google.charts.setOnLoadCallback(controlsAndDashboards);
function controlsAndDashboards() {
var data = new google.visualization.DataTable();
data.addColumn('date', '日');
data.addColumn('number', 'Dogs');
function getRandomInt(min, max) {
return Math.floor( Math.random() * (max - min + 1) ) + min;
}
for (var day = 1; day < 360; ++day) {
var date = new Date(2015, 0 ,day);
data.addRow([date, getRandomInt(0, 2000)]);
}
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, 159, 64)'],
height: 70
}
}
}
});
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart1_div',
options: {
height: 80,
hAxis: {
textPosition: 'none'
},
colors: ['rgb(255, 99, 132)']
}
});
var areaChart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart2_div',
options: {
height: 80,
hAxis: {
textPosition: 'none'
},
colors: ['rgb(54, 162, 235)']
}
});
var barChart = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'chart3_div',
options: {
height: 80,
colors: ['rgb(255, 206, 86)']
}
});
var columnChart = new google.visualization.ChartWrapper({
...