対象者

簡単に無料でグラフを作成したい
html や javascriptについて、一応基本ならわかるよって方

記事読んだ後にできること

グラフによるデータの可視化ができるようになる
グーグルチャートのコードが理解できる

グーグルチャートとは

今回グラフ化するにあたって、おすすめしたいのがグーグルチャートと呼ばれるものです。
約30種類のチャートがあって、データに合ったものを選ぶことができます。
現時点では、無料で商用利用も可能です。

グーグルチャートギャラリー

グーグルチャートの使い方

使い方は、すっごく簡単。
3分くらいでちゃちゃっとグラフが表示されちゃいます。カップラーメン並み。

円グラフを作ってみよう

早速、グーグルチャートを使って円グラフを作成してみましょう。
作成するのは、よくある一日のアクティビティを円グラフにしたものです。

考えるべき4つのこと

グーグルチャートでグラフを作成する際に考えることは、
とりあえず下記の4つだけで大丈夫です。

1. データの用意
2. タイトル(オプションと呼ばれるところ)
3. グラフの形(今回は円グラフ)
4. グラフの表示場所

では実際にコードをみていきましょう。

コードの書き方

円グラフのコード

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

javascriptで書かれています。
上をコピーして貼り付けるだけでもグラフができてしまうと思います。

簡単にですが、中身を説明していきます。

グーグルチャートの呼び出し

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});

コードの上の方にある、ここでグーグルチャートのAPIやパッケージを呼び出しています。
これがないとAPIが呼び出されず表示されないので、必ず書いてください。

設定箇所は4つに分類される

先ほど書いた、グラフを作成する際に必要な「考えるべき4つのこと」を思い出してみましょう。

1. データの用意
2. タイトル(オプションと呼ばれるところ)
3. グラフの形(今回は円グラフ)
4. グラフの表示場所

これをコードに当てはめてみるとこんな感じになっています。

全体をこうやってみてみると、すごく簡単ですよね。
4つをさらに細かくみていきます。

①データの用意

配列で書くことで、グラフにデータを用意できます。

          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]

注意する点としては、グラフの種類によって必要なデータ型が異なります。
データ型が異なる場合エラーが出るので、データ型変換をするなりして対処してください。

※円グラフの場合、最初の配列にある['Task', 'Hours per Day']は、どこにも表示されません。

②タイトル(オプション)

タイトルはここで設定しています。

var options = {
  title: 'My Daily Activities'
};

今回は、タイトルの設定だけなのですが、options がすごく豊富なのもグーグルチャートのすごいところです。
サブタイトルの追加やグラフ色の変更、3Dグラフにしたりもできます。

③グラフの形を指定


var chart = new google.visualization.PieChart(document.getElementById('piechart'));

ここのgoogle.visualization.PieChartで、円グラフにしてねとやっています。
ここをいじるだけで、データ型さえ合っていればグラフがスッと変わります。
例えばgoogle.visualization.LineChartにすると、棒グラフになったりします。便利ッ

④グラフの表示場所を指定


var chart = new google.visualization.PieChart(document.getElementById('piechart'));

document.getElementById('piechart')のところに注目します。
piechartという部分で、html側のidを指定しています。

  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>

すると、html側のid="piechart"と紐付き、ここにグラフが表示される仕組みになっています。

最後に

今回は簡単にグーグルチャートの円グラフの説明だけでしたが、
他のグラフの作成方法もほぼ変わりないので、
この記事である程度なんとなくわかった気がするって方は、是非いろんなグラフも試してみてください。

グーグルチャートドキュメント(円グラフ)
グーグルチャートクイックスタート

【Google Charts】サクッとデータをグラフ化

対象者