地図 棒グラフ 表の連携 (実験)
////
////
////
////
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table', 'map', 'corechart']});
google.setOnLoadCallback(initialize);
function initialize() {
// The URL of the spreadsheet to source data from.
var query = new google.visualization.Query(
'https://spreadsheets.google.com/pub?key=pCQbetd-CptF0r8qmCOlZGg');
query.send(draw);
}
function draw(response) {
if (response.isError()) {
alert('Error in query');
}
var ticketsData = response.getDataTable();
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom',
'vAxis': {'title': 'Number of tickets'}});
var geoData = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name', 'Food?'],
[51.5072, -0.1275, 'Cinematics London', true],
[48.8567, 2.3508, 'Cinematics Paris', true],
[55.7500, 37.6167, 'Cinematics Moscow', false]]);
var geoView = new google.visualization.DataView(geoData);
geoView.setColumns([0, 1]);
var table =
new google.visualization.Table(document.getElementById('table_div'));
table.draw(geoData, {showRowNumber: false});
var map =
new google.visualization.Map(document.getElementById('map_div'));
map.draw(geoView, {showTip: true});
// Set a 'select' event listener for the table.
// When the table is selected, we set the selection on the map.
google.visualization.events.addListener(table, 'select',
function() {
map.setSelection(table.getSelection());
});
// Set a 'select' event listener for the map.
// When the map is selected, we set the selection on the table.
google.visualization.events.addListener(map, 'select',
function() {
table.setSelection(map.getSelection());
});
}
</script>
</head>
<body>
<table align="center">
<tr valign="top">
<td style="width: 40%;">
<div id="map_div" style="width: 300px; height: 200;"></div>
</td>
<td style="width: 40%;">
<div id="table_div"></div>
</td>
</tr>
<tr>
<td colSpan=2>
<div id="chart_div" style="align: center; width: 500px; height: 250px;"></div>
</td>
</tr>
</table>
</body>
</html>
//// Full HTML Page Example
An end-to-end example for creating a web page with visualization charts embedded in it. It also demonstrates a chart connected to Google Spreadsheets and two charts interacting using visualization Events.
The example displays a simple statistics page for popular movies and cinema locations of a make-belief cinema chain company.
The page includes a Map and a Table visualization that interact with each other to display the theater locations. The page includes a column chart displaying the number of tickets each movie sold per location. It derives its data from a Google Spreadsheet. The published version of this spreadsheet can be viewed for completeness.
完全なHTMLページの例
その中に埋め込まれた可視化グラフを持つWebページを作成するためのエンドツーエンドの例。また、Googleスプレッドシートと視覚化のイベントを使用して対話する2つのチャートに接続図を示しています。
例では、人気の映画やメイク信念シネマチェーン会社の映画館の場所のための簡単な統計ページが表示されます。
ページには、劇場の場所を表示するには、互いに相互作用マップとテーブルの可視化が含まれています。ページには、チケットの数場所ごとに販売された各ムービーを表示する縦棒グラフが含まれています。それは、Googleスプレッドシートからデータを導出します。このスプレッドシートの公開されたバージョンは、完全を期すために見ることができます。
////
コメント