シンプルなGoogle Chart Toolsの使い方

# はじめに
Google Chart Toolsというライブラリでグラフを描く機会があったので、使い方などをまとめていきたいと思います。

公式
 [Google Chart Tools](https://developers.google.com/chart/)

# 今回の完成形
![barchart_sample.png](https://qiita-image-store.s3.amazonaws.com/0/118801/e3c01962-2069-edf0-7089-239b348785ce.png)

公式にある [Bar Chart](https://developers.google.com/chart/interactive/docs/gallery/barchart?hl=ja) のサンプルから必要最低限の設定だけの超シンプルグラフです！
実際の動きは [JSFiddle](https://jsfiddle.net/hippocampuscoronatus/gkj7p3mg/) で確認できます。

# コードの中身
```html:html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
```
```javascript:javascript
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  // DataTableを使用
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'City');
  data.addColumn('number', '2010 Population');
  data.addColumn('number', '2011 Population');
  data.addRows([
    ['New York City, NY', 810, 450]
  ]);

  // arrayToDataTableを使用
  // var data = google.visualization.arrayToDataTable([
  //   ['City', '2010 Population','2011 Population'],
  //   ['New York City, NY', 810, 450]
  // ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    // trueにすると積み上げ棒グラフになる
    isStacked: false,
    animation: {
      duration: 2000,
      easing: 'out',
      startup: true
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}
```
## 描画までの流れ

* html上で**id**(*chart_div*)を設定します。
> ``` <div id="chart_div"></div> ```
 
* Javascriptでgooglechartの**packages**(*['corechart', 'bar']*)を指定します。
> ``` google.charts.load('current', {packages: ['corechart', 'bar']}); ```
 
* ここではLoadでdrawChart()を呼び出します。
> ``` google.charts.setOnLoadCallback(drawChart); ```
 
 * **data**と**options**を用意します。
 * **chart**で**id**(*chart_div*)に**BarChart**を紐付けます。
 * 最後にchart.drawで描画しています。

### Dataについて
データを用意する方法にDataTableとarrayToDataTableを用いる方法があるので両方用意しました。

* 先頭のカラムはデータのドメインを指定しています。
 * 今回は文字列で*'City'*とラベルをつけています。
 * 文字列の他に数値や日付、時間などを指定できます。

* 以降のカラムではデータを追加していきます。
 * オプションでデータロールを指定できます。
 * 今回は何も指定していません。

### Optionsについて
オプションは設定しなくても動きます。
今回はグラフのタイトルとアニメーションを設定しています。
アニメーションは**startup**が**true**でないと動かないので注意が必要です。

**isStacked**を**true**にすると積み上げ棒グラフになります。

積み上げ棒グラフ
![barchart_stack_sample.png](https://qiita-image-store.s3.amazonaws.com/0/118801/29d118d2-723a-aa62-3bd1-e034f37f914d.png)

# ちなみに
## BarchartとColumnchart
Google Chart ToolsでBarchartとColumnchartは設定を少しいじるだけですぐに描画できます。

```javascript
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
```

この部分の**BarChart**を**ColumnChart**に代えます。

```javascript
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
```

すると以下のようなグラフになります。

![columnchart_sample.png](https://qiita-image-store.s3.amazonaws.com/0/118801/f22fa9d2-e857-9af2-b837-fe47c57c01bf.png)

# 最後に

今回はグラフの描画をメインに行いました。
また今回は棒グラフでしたが他にもたくさんのグラフがあるので色々試してみたいと思います。
設定も機会があれば色々試したいです。

以下、試した機能などです。

* [Google Chart Toolsでグラフに垂直線を描画する](http://qiita.com/hippocampus-coronatus/items/982255fc4f61c3f1ff52)

* [Google Chart Toolsでチャートの表示・非表示の切り替えを行う](http://qiita.com/hippocampus-coronatus/items/3f31148ab538eb4d1bd0)

* [Google Chart Toolsで人口ピラミッドのグラフを描画する](http://qiita.com/hippocampus-coronatus/items/2583cf05efa5dbb73860)

* [Google Chart Toolsで複数グラフを同時にコントロールする](http://qiita.com/hippocampus-coronatus/items/9c8a62e9eaf988ea3f89)

* [Google Chart Toolsで複数グラフを同時にコントロールする(異なるデータを用いるver)](http://qiita.com/hippocampus-coronatus/items/f886dcb4eeaa45438c41)