うぇぶろぐらまーな日誌

GraphApiの中でも異彩を放つCandlestickChartがどの程度カスタマイズできるのか試してみた。

まずは公式リファレンスをざっと読んでみる。

https://developers.google.com/chart/interactive/docs/gallery/candlestickchart

さらっと目を通しただけでもかなりの数のプロパティが確認できる。これはワクテカがとまらない。

ということで網羅的にいろんなオプションをいじってグラフ生成スクリプトを組んでみた。

まずは必要なライブラリをヘッダー内で読みこむ。
※グラフ描画領域の幅を取得するのにjQueryを使用しているので、ここではjQueryも読み込む。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi">
<script type="text/javascript" src="//www.google.com/jsapi"></script><script type="text/javascript">
	google.load('visualization', '1', {packages: ['corechart']});
</script>

そして要のスクリプト部分は以下のようにしてみた。

<script type="text/javascript">
function drawVisualization() {
	var width = $('#chart_div').width()-70;
	var data = google.visualization.arrayToDataTable([["09-01",150,150,150,150],["09-02",150,150,150,150],["09-03",150,150,150,150],["09-04",150,150,150,150],["09-05",150,150,150,150],["09-06",150,150,150,150],["09-07",150,150,150,150],["09-08",150,150,150,150],["09-09",150,150,150,150],["09-10",150,150,150,150],["09-11",150,150,150,150],["09-12",150,150,150,150],["09-13",150,150,150,150],["09-14",150,150,150,150],["09-15",150,150,150,150],["09-16",150,150,150,150],["09-17",150,150,150,150],["09-18",150,150,150,150],["09-19",150,150,150,150],["09-20",150,150,150,150],["09-21",150,150,150,150],["09-22",150,150,150,150],["09-23",150,150,150,150],["09-24",150,150,150,150],["09-25",150,150,150,150],["09-26",150,150,150,150],["09-27",150,150,150,150],["09-28",150,150,150,150],["09-29",150,150,150,150],["09-30",150,150,150,150]], true);
	var options = {
		legend:'none',
		colors:['#7fff00'],
		fontName:'meiryo',
		animation:{
			duration:'600',
			easing:'out'
		},
		backgroundColor:{
			fill:'#000',
			stroke:'#7fff00',
			strokeWidth:'5'
		},
		candlestick:{
			hollowIsRising:true,
			fallingColor:{
				fill:'#FFF',
				stroke:'#7fff00',
				strokeWidth:'1'
			},
			risingColor:{
				fill:'#000',
				stroke:'#7fff00',
				strokeWidth:'1'
			}
		},
		chartArea:{
			left:'50',
			top:'20',
			width:width,
			height:'90%'
		},
		vAxis:{
			baseline:'0',
			baselineColor:'#FFF',
			gridlines:{
				color:'#444',
				count:'10'
			},
			minorGridlines:{
				color:'#222',
				count:'3'
			},
			textStyle:{
				color:'#FFF',
				fontSize:'12'
			},
			title:'Price of a stock',
			titleTextStyle:{
				color:'#FFF',
				fontSize:'12',
				bold:false,
				italic:false
			}     
		},
		hAxis:{
			textStyle:{
				color:'#FFF',
				fontSize:'12'
			},
			maxAlternation:'1',
			slantedText:false
		},
		tooltip:{
			textStyle:{
				color:'#333',
				fontSize:'12',
				bold:false
			}
		}
	};
	var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
	var button = document.getElementById('b1');
	var drawChart = function(){
		button.disabled = true;
		google.visualization.events.addListener(chart, 'ready', function(){
			button.disabled = false;
		});
		chart.draw(data, options);
	};
	button.onclick = function(){
		var prevClose = null;
		var newOpen = null;
		var newClose = null;
		var newHigh = null;
		var newLow = null;
		for(i = 0; i < data.getNumberOfRows(); i++){
			newOpen = (prevClose) ? prevClose : Math.floor(Math.random()*300);
			newClose = Math.floor(Math.random()*300);
			newHigh = newOpen + Math.floor(Math.random()*100);
			newlow = Math.floor(Math.random()*newClose);
			prevClose = newClose;
			data.setValue(i, 1, newlow);
			data.setValue(i, 2, newOpen);
			data.setValue(i, 3, newClose);
			data.setValue(i, 4, newHigh);
		}
		drawChart();
	}
	drawChart();
}
google.setOnLoadCallback(drawVisualization);
</script>

マークアップは以下の通りグラフ描画領域とトリガーのみ。

<div id="chart_div" style="width: 100%; height: 500px;"></div>
<button id="b1" style="margin-top:20px">Randomize</button>

そして上記のスクリプトを実行すると以下のようになる。

Randomize

これは激熱。グラフAPIくっそ面白い！笑

スクリプト実行中にライブラリを動的読み込みしたい時とか。

$.getScript('//example.com/ex.js', function(){
	// 任意のコード
})

$.getScript()を用いることで、外部JSを動的に読み込むことが出来る。第二引数にてコールバックを指定すれば、スクリプトファイルの読み込み完了後に実行してくれるので非常に便利。