Google Chart Tools覚書

Web上でグラフ表示をさせるために、「GoogleChartTools」を使用するため色々と調査。
表示したいのは、こんな感じのグラフ

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/9a64c09c-090c-ea44-2aba-ecbcb885afab.png)

***
参考サイト：http://yohshiy.blog.fc2.com/blog-entry-195.html

***

引き継いだ時のグラフは、こんな感じでした。

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/1ec95e2d-5ed7-e6a1-0e72-2818609cec81.png)

***
**棒グラフ→散布図へ**
渡すデータの先頭列が文字列か数値で、グラフの種類が変わるらしい…
今回は、散布図に近いものを求められているので、文字列から数値に変更してみた。

>折れ線グラフでは先頭列を文字列にすると 棒グラフ、 数値にすると 散布図 のような扱いになります。

変更前：['時間','気温','湿度','ＣＯ２濃度']
　　　　,['00:00',22.0,75.9,404.0]
　　　　,['00:20',21.4,78.9,419.0]

変更後： ['時間','気温','湿度','ＣＯ２濃度']
　　　　,[new Date(2015, 3, 20, 0, 0, 0),22.0,75.9,404.0]
　　　　,[new Date(2015, 3, 20, 0, 20, 0),21.4,78.9,419.0]

変更後のグラフは、こうなりました。

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/61896de1-ff5c-eb10-6de6-3175b623a0fb.png)

***
**サブ補助線追加**
オプションに追加してみた

,hAxis: {
	minorGridlines:{ count: 2, color: 'gray'}
	}

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/49f3e61b-5773-3834-ae96-44e7aa559e61.png)

色が合ってない…

変えてみた

,hAxis: {
	minorGridlines:{ count: 2, color: '#cccccc'}
}

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/eb96491f-58fd-d17e-c1cf-bc293c8d81cb.png)

補助線もサブ補助線もスタイルを点線にしたなぁ

***
点線はいったん諦めて…

縦軸を複数表示する方法を模索…

追加してみた

width: 900,
height: 500,
series: {
          0: {type:'line', targetAxisIndex: 0},
          1: {type:'line', targetAxisIndex: 1},
          2: {type:'line', targetAxisIndex: 2}
	},
vAxes:{
	0:{title:''},
	1:{title:''},
	2:{title:'', textPosition:'in'}
},

widthとheightは関係ないけど、結果はこんな感じ

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/70101209-7651-035d-1111-8ed625cab008.png)

近くはなってきたんだけど…縦軸の目盛の位置がどうにも変えられないし、左側に全部表示できない。

***

**Optionを切替えて、左側の目盛を表示したい内容に変更する**

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/c782a9d3-3831-8db4-52c0-749627ed6378.png)
>series: {
>         0: {type:'line', targetAxisIndex: 0},
>         1: {type:'line', targetAxisIndex: 1},
>         2: {type:'line', targetAxisIndex: 2}
>	},
>vAxes:{
>	0:{title:'',minValue:0,maxValue:40,textStyle:{color: 'blue'}},
>	1:{title:'', textPosition:'none',minValue:0,maxValue:100,textStyle:{color: 'red'}},
>	2:{title:'', textPosition:'none',minValue:0,maxValue:1000,textStyle:{color: 'orange'}}
>},

![image](https://qiita-image-store.s3.amazonaws.com/0/67341/81043748-0b43-bf04-b00f-feb505eea7a7.png)
>series: {
>          0: {type:'line', targetAxisIndex: 1},
>          1: {type:'line', targetAxisIndex: 0},
>          2: {type:'line', targetAxisIndex: 2}
>	},
>vAxes:{
>	1:{title:'', textPosition:'none',minValue:0,maxValue:40,textStyle:{color: 'blue'}},
>	0:{title:'',minValue:0,maxValue:100,textStyle:{color: 'red'}},
>	2:{title:'', textPosition:'none',minValue:0,maxValue:1000,textStyle:{color: 'orange'}}
>},


![image](https://qiita-image-store.s3.amazonaws.com/0/67341/f4a85abb-10f8-4eb8-b2dd-b9c3c85a2332.png)
>series: {
>          0: {type:'line', targetAxisIndex: 1},
>          1: {type:'line', targetAxisIndex: 2},
>          2: {type:'line', targetAxisIndex: 0}
>	},
>vAxes:{
>	1:{title:'', textPosition:'none',minValue:0,maxValue:40,textStyle:{color: 'blue'}},
>	2:{title:'', textPosition:'none',minValue:0,maxValue:100,textStyle:{color: 'red'}},
>	0:{title:'',minValue:0,maxValue:1000,textStyle:{color: 'orange'}}
>},