Browse: Home » 【Javascript】GoogleChartsのCandlestickChartで遊んでみた。

【Javascript】GoogleChartsのCandlestickChartで遊んでみた。


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>

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

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

 

2013/09/22 _onichannn , ,