Google Chart Tools覚書

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

---

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

---

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

---

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

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

変更前：['時間','気温','湿度','ＣＯ２濃度']
　　　　,['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]

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

---

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

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

色が合ってない…

変えてみた

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

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

---

点線はいったん諦めて…

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

追加してみた

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は関係ないけど、結果はこんな感じ

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

---

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

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'}}
},

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'}}
},

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'}}
},