오늘은 즐거운 토요일로 간단한 실험을 post로 남깁니다. 구글 차트 안내에서 예제 중 눈에 가는 Candlestick Chart가 있어서 한번 따라서 실험을 해보았네요. 전용 Candlestick Chart를 만드는 techan.min.js 라이브러리가 있긴 하는데 심풀하게 구글 차트에서도 만들어 놓은 함수가 있길래 한번 돌려봤네요.
참고에서 차트 기본 구조 코딩에서 Candlestick Chart를 만드는 방법은 다음과 같습니다. Candlestick Chart 데이터 부분과 Candlestick Chart 함수부분만 수정하면 알아서 자동으로 만들어 줍니다.
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
참고 post에서 보시면 기본 코딩에서 CandlestickChart()함수명만 바꾸면 됩니다.
실험은 구글 Candlestick Chart 예제로 돌렸습니다.
구글 기본 코딩 구조에서 arrayToDataTable()함수와 CandlestickChart()함수만 수정하면 Candlestick Chart가 쉽게 만들어 집니다.
[소스]
<body>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['1일', 10, 20, 30, 40],
['2일', 20, 30, 40, 50],
['3일', 30, 40, 50, 60],
['4일', 60, 50, 40, 30],
['5일', 50, 40, 30, 20],
['6일', 40, 30, 20, 10]
], true);
var options = {
'title':'CandlestickChart Test',
'width':500,
'height':300,
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
[결과]
외부 데이터와 연결하면 가상화폐 차트 같은 것을 간단히 구현이 가능할 듯 보이네요. 기본 구조를 그대로 두고 arrayToDataTable() 함수 안에 데이터 형식만 맞춰서 데이터를 만들면 차트는 쉽게 구현이 되겠죠.
구글 차트 안내에 나온 예제들을 다 한번씩 돌려봤는데 괜찮더군요. 만약 지금 차트를 활용한다면 D3.js보다는 구글 차트를 먼저 사용할 것 같네요.
한번 구글 차트 안내에 나온 순서대로 읽고 예제드을 한번씩 돌려보시고 돌리실 때는 이전에 사용한 코딩 스타일을 접목하여 테스트 하시면 더 재밌는 실험이 될 거에요.