Google Chartsでグラフ表示。その基本形を理解する。

2021年03月06日 2021年03月10日

たぐと申します。
東京のweb制作会社でプロデューサーをしています。

今回はGoogleのグラフ表示API Google Chartsについて説明します。

Google Chartsは無料でグラフ表示ができる仕組み。

Google ChartsはGoogleが提供するwebサイトにグラフを埋め込むための仕組みです。webサイトにGoogleマップを埋め込んだりできますよね。

あれと似た感じです。

このGoogle Chartsは、グラフをwebサイトに埋め込めるわけですが、埋め込めるグラフのパターンはめちゃくちゃたくさんあります。

Geo Chart（地図）
Scatter Charts（分布図）
Column Charts（棒グラフ）
Histgram（ヒストグラム）
Bar Charts（棒グラフ）
Combo Charts（線グラフ＋棒グラフ）
Area Charts（合算グラフ）
Stepped Area Charts（ステップ式合算グラフ）
Line Charts（線グラフ）
Pie Charts（円グラフ）
Bubble Charts（バブルチャート）
Donuts Charts（ドーナツ型円グラフ）
Org Charts（階層図）
Tree Map（ツリーマップ）
Table（表）
Timeline（タイムライン・ガントチャート）
Gauge（メーター）
Candle Stick Charts（ろうそく式チャート）

※日本語は適当です。

詳しくは以下をご覧ください。

https://developers.google.com/chart

いろいろあるけど、まずは基本形を理解しておく。

こんな円グラフ、棒グラフが一番よく使うパターンかと思います。

棒グラフのコード

まずは棒グラフのコードです。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <!-- バーチャートの定義 -->
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart1);

      function drawChart1() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', '月');
        data.addColumn('number', 'PV');
        data.addRows([
          ['9月', 10],
          ['10月', 30],
          ['11月', 100],
          ['12月', 200],
          ['1月', 300]
        ]);

        // Set chart options
        var options = {
          'title':'ブログのPV推移',
          'height':300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <!--/バーチャートの定義 -->

    <!-- バーチャートの描画 -->
    <div id="chart_div" style="width:100%"></div>
    <!--/バーチャートの描画 -->

コードはこのままコピーペーストでOKです。
上から簡単に説明します。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

この部分は、最初に読み込んでおくものです。headerタグの中で一度読み込んでおけばそれで大丈夫。

次は、グラフに表示する内容の定義です。

<!-- バーチャートの定義 -->
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart1);

      function drawChart1() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', '月');
        data.addColumn('number', 'PV');
        data.addRows([
          ['9月', 10],
          ['10月', 30],
          ['11月', 100],
          ['12月', 200],
          ['1月', 300]
        ]);

        // Set chart options
        var options = {
          'title':'ブログのPV推移',
          'height':300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <!--/バーチャートの定義 -->

ちょっと長いですが、この部分。

「addColumn」部分で、軸の定義をしています。
横軸を「期間（月）」として考え、縦軸を「計測値（PV）」として考えています。string、numberは表示する項目の型を表しています。

「月」、「PV」の部分は自由に書き換えてください。

「addRows」の部分で、具体的なデータを定義しています。

9月は10PV、10月は30PV、11月は100PV・・・
こんな調子ですね。

さらにその下の「options」というのはグラフを表示する際の全体定義のようなものです。ここでは、グラフのタイトルを「ブログのPV推移」としました。

そして、グラフの高さを300ピクセルで表示する、ということをしています。

「ColumnChart」この部分でグラフの型を定義しています。
ここを「PieChart」にすれば、円グラフに表示が変わります。

最後に実際に描画している部分は

<div id="chart_div" style="width:100%"></div>

この部分です。「chart_div」というのは、上の「ColumnChart」関数の中で、指定しています。要は

「chart_div」というClass名が指定されている部分に、定義したグラフを表示して！

ということですね。多分。

いかがでしょう。一見難しいですが、まずは基本の型を抑えた上で、オプションの設定可能項目の理解を深めていくのが良さそうです。

円グラフのコード

今、棒グラフのコードを紹介しましたが、よく使うであろう円グラフもほぼ同じようなコードになりますので紹介します。

<!-- パイチャートの定義 -->
<script type="text/javascript">

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart2);

  function drawChart2() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'ブラウザ');
    data.addColumn('number', '数');
    data.addRows([
      ['Chrome', 50],
      ['Edge', 20],
      ['Safari', 15],
      ['Firefox', 5],
      ['InternetExplorer', 5]
    ]);

    // Set chart options
    var options = {
      'title':'ブラウザのシェア',
      'height':500
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_pie'));
    chart.draw(data, options);
  }

  // onReSizeイベント    
  window.onresize = function(){
    drawChart2();
  }
</script>
<!--/パイチャートの定義 -->

ここでは、サンプルとしてブラウザのシェア率的なグラフを作ってみました。
さきほどの棒グラフと違うのは、「addRows」「addColumn」で設定している値、そして、グラフ定義を確定している「PieChart」という指定部分くらいです。

ウィンドウサイズ変更時にグラフの大きさも変更する場合。

あと、グラフの表示サイズが固定でいいならここまでなのですが、ウィンドウをリサイズしたときに、グラフもリサイズするなら、再描画するように設定しておく必要があります。

ここでは、グラフを二つ表示しているので、下記のようにウィンドウリサイズ時（window.onresize）にグラフを描画している　「drawChart1」「drawChart2」の関数を改めて呼び出しています。

  // onReSizeイベント    
  window.onresize = function(){
    drawChart1();
    drawChart2();
  }

グラフ表示サービスの情報はまだまだ不足。

個人的には、グラフ、表、ツリー図といったもののデファクトスタンダードになるようなサービスが誕生して欲しいって思います。

こういうものを画像で作るのって骨が折れますし、更新性が悪いですからね。
特に企業のwebマスターの方も、部署名がすこし変わるだけなのに、それを毎回web制作会社に更新依頼するのって大変だと思うのですよね。

そして現状、その位置に存在するサービスは皆無かな。。と。
グラフということで言えばChart.jsというものもありますね。

https://www.chartjs.org/

とはいえ、これらについてのナレッジやマニュアル的なものは少なく、公式の情報も結構わかりにくいな・・と。
ただ、こういうサービスがあって、使うとなるとこういう仕組みになっているようだぞ、ってことは理解しておいて損はないかなと思うのです。

以上でーす。