[D3.js] 구글 Candlestick Chart

---

• 구글 Candlestick Chart : https://developers.google.com/chart/interactive/docs/gallery/candlestickchart?authuser=0&refresh=1

---

오늘은 즐거운 토요일로 간단한 실험을 post로 남깁니다. 구글 차트 안내에서 예제 중 눈에 가는 Candlestick Chart가 있어서 한번 따라서 실험을 해보았네요. 전용 Candlestick Chart를 만드는 techan.min.js 라이브러리가 있긴 하는데 심풀하게 구글 차트에서도 만들어 놓은 함수가 있길래 한번 돌려봤네요.

1. Candlestick Chart

---

• 참고 : [D3.js] 구글 차트 기초 정리

---

참고에서 차트 기본 구조 코딩에서 Candlestick Chart를 만드는 방법은 다음과 같습니다. Candlestick Chart 데이터 부분과 Candlestick Chart 함수부분만 수정하면 알아서 자동으로 만들어 줍니다.

 var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
     chart.draw(data, options);

참고 post에서 보시면 기본 코딩에서 CandlestickChart()함수명만 바꾸면 됩니다.

2. 실험

---

실험은 구글 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보다는 구글 차트를 먼저 사용할 것 같네요.
한번 구글 차트 안내에 나온 순서대로 읽고 예제드을 한번씩 돌려보시고 돌리실 때는 이전에 사용한 코딩 스타일을 접목하여 테스트 하시면 더 재밌는 실험이 될 거에요.

---

_{Sponsored ( Powered by dclick )}