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

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

#記事読んだ後にできること
- グラフによるデータの可視化ができるようになる
- グーグルチャートのコードが理解できる

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

![スクリーンショット 2020-08-27 9.37.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682826/c0f2914d-405e-57b6-53c2-7e5b17a4ae94.png)

[:mag:グーグルチャートギャラリー](https://developers.google.com/chart/interactive/docs/gallery)

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

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

##円グラフを作ってみよう
早速、グーグルチャートを使って円グラフを作成してみましょう。
作成するのは、よくある一日のアクティビティを円グラフにしたものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682826/6c57d99b-e668-cc7f-3ca1-625f03dae9c7.png)

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

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

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

###コードの書き方

```html:円グラフのコード
<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で書かれています。
上をコピーして貼り付けるだけでもグラフができてしまうと思います。

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

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

```html
<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. グラフの表示場所**

これをコードに当てはめてみるとこんな感じになっています。
![スクリーンショット 2020-08-27 13.36.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682826/5e1a40ea-2796-2be9-eda4-6a65fca4e93e.png)

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

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

```php
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
```
注意する点としては、グラフの種類によって必要なデータ型が異なります。
データ型が異なる場合エラーが出るので、データ型変換をするなりして対処してください。

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

####②タイトル(オプション)
タイトルはここで設定しています。

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

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

####③グラフの形を指定

```javascript

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

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

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

```javascript

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

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

```html
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
```
すると、html側の`id="piechart"`と紐付き、ここにグラフが表示される仕組みになっています。

#最後に

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

[:mag:グーグルチャートドキュメント(円グラフ)](https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ja)
[:mag:グーグルチャートクイックスタート](https://developers.google.com/chart/interactive/docs/quick_start)