地図 棒グラフ 表の連携 (実験)
////

//// 
<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スプレッドシートからデータを導出します。このスプレッドシートの公開されたバージョンは、完全を期すために見ることができます。
////