Magicode logo
Magicode
1
4 min read

Google Chartsで地図データを表示する(Geo Charts)

https://cdn.apollon.ai/media/notebox/googlegeochart.png

はじめに

Googleスプレッドシートに読み込み元のデータを用意し、それをGoogle ChartsでWeb表示してみたいと思います。 今回は、地図に描画してわかりやすい世界の平均寿命を表示してみたいと思います。

使用技術 / 前提条件

  • JavaScript
  • Google SpreadSheet API
  • Google MAP API KEY

データ内容

・Googleスプレッドシートに、世界の平均寿命ランキングの上位20カ国、下位20カ国を用意(2020年:WHO) (参考サイト:https://memorva.jp/ranking/unfpa/who_whs_population.php)

作成サイト

Googleスプレッドシートに用意したデータをマップ表示し、かつ順位がわかりやすいようにテーブルにも出力します。

コード

  • Googleスプレッドシートからのデータ読み込みと地図表示部分
google.charts.load('current', {
        'packages':['geochart'],
        'mapsApiKey': 'APIキーを設定'
      });

      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        // Google APIにてスプレッドシートデータを取得する
        const request = new XMLHttpRequest();
        const bookid = 'bookidを設定';
        const sheetname = 'シート名を設定';
        const url = 'https://sheets.googleapis.com/v4/spreadsheets/' + bookid + '/values/' + sheetname + '?key=APIキーを設定';

        request.open('GET', url, true);
        request.responseType = 'json';

        request.onload = function () {
          // 取得できた値を格納
          const rdata = this.response;

          // MAP:データ変換
          let flg = 1;
          const mdata = parseData(rdata, flg);

          // MAP:データセット
          const data = google.visualization.arrayToDataTable(mdata);

          // MAP:オプション設定
          const options = {
            // region: '155',
            // displayMode: 'markers',
            // colorAxis: {colors: ['#e7711c', '#4374e0']}
          };

          // MAP:セットと描画
          const chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
          chart.draw(data, options);

          // Table:データ変換とテーブル描画
          flg = 2;
          const tdata = parseData(rdata, flg);
          drawTable(tdata);

        };
        request.send();
      };

まとめ

  • 外部のデータ読み込んで、簡単に地図にマップすることができました。
  • 今回は使っていませんが、オプションも豊富なので細かいところにも対応できるところがすごいところです。
  • Google Chartは、グラフや円、バブルなどの定番のチャートから、今回使用した地図(GeoCharts)やどうやって使えばよいかわからないマニアックな種類のチャートまでたくさんありますので、WebでChart関連の表示は、第1候補ではないかなと思います。

Discussion

コメントにはログインが必要です。