[C3.js] d3.js+C3.js로 steem 시세 시각화 | Ecency

[C3.js] d3.js+C3.js로 steem 시세 시각화

참고 :
업비트 API : https://upbit.com/service_center/open_api_guide
C3.js 사이트 : https://c3js.org/400925

최근 가상화폐가 봄이 찾아 왔는지 약간 상승 중이고 해서 예전에 오픈 API로 거래소 가상화폐 정보를 가져오는 것을 간단히 실험 한적이 있는데 Chart 공부를 최근 일때문에 미루다 감이 떨어진 것 같아서 간단히 최근 가상화폐 상승 분위기도 있고 해서 즉흥적으로 Chart를 만들어 보는 시간으로 post를 작성 합니다.

지난 post를 몇개 섰는데 위치가 잘 기억이 안나서 해당 post 주소를 위에 링크를 걸어 놓아야 하는데 걍 포기하고 내용만 간단히 작성 합니다.

1. 업비트 Steem 시세 읽기

function MarketCoincandles(market,coin,timeVal,count){
  const request = new XMLHttpRequest();
  const url = 'https://api.upbit.com/v1/candles/minutes/'+timeVal+'?market='+market+'-'+coin+'&count='+count;
  
  request.open("GET", url, false);
  request.send();
  var obj = JSON.parse(request.responseText);
  console.log(obj);
}
MarketCoincandles('KRW','STEEM',30,5);

MarketCoincandles(마켓, 코인, 분봉, 갯수) : 사용정의함수임.

[결과]

지난 post에서 실험했던 steem 코인의 정보를 30분봉으로 최근 순으로 5개 얻어와서 그 결과를 콘솔창에 출력 해보았습니다.

이제는 차트를 만들어 볼 시간입니다.

2. C3.js 차트로 출력하기

사전학습 :
[D3.js] C3.js 라이브러리 소개 : https://steemit.com/dclick/@codingman/d3js-c3js--1542155310473
[D3.js] C3.js+Steem.js post 보상 pie chart : https://steemit.com/dclick/@codingman/d3js-c3jssteemjs-post-pie-chart-1542241781821
[D3.js] C3.js로 쉽게 차트 만들기 : https://steemit.com/dclick/@codingman/d3js-c3js--1542328400925
C3.js 사이트 : https://c3js.org/

C3.js 차트로 출력하기 위해서는 다운을 받아서 사용해야 합니다. 온라인 외부 링크를 제공하지 않아서 C3.js 사이트 가셔서 css파일과 c3.js파일을 다운 받으시면 됩니다. d3.js은 외부 링크를 이용합니다.

spline chart로 출력

참고 : https://c3js.org/samples/chart_spline.html

위 예제의 형태로 출력 됩니다.

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
            스팀 시세 데이터
      ],
      type: 'spline'
      
    }
  });

steem 시세 + spline chart

<link href="c3.css" rel="stylesheet">
<script src="c3.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>

<div id="chart"></div>

<script>
function MarketCoincandles(market,coin,timeVal,count){
  const request = new XMLHttpRequest();
  const url = 'https://api.upbit.com/v1/candles/minutes/'+timeVal+'?market='+market+'-'+coin+'&count='+count;
  
  request.open("GET", url, false);
  request.send();
  var obj = JSON.parse(request.responseText);
  

  var high_price = ["high_price"];
  var low_price = ["low_price"];
  var trade_price = ["trade_price"];
  var opening_price = ["opening_price"];
  var candle_date_time_kst = ["candle_date_time_kst"];

  for(var i=obj.length-1; i>=0; i--) {
    high_price.push(obj[i].high_price);
    low_price.push(obj[i].low_price);
    trade_price.push(obj[i].trade_price);
    opening_price.push(obj[i].opening_price);
   
  }
 
  render(high_price,low_price,trade_price,opening_price);

 }


function render(high_price,low_price,trade_price,opening_price){
  var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        high_price,
        low_price,
        trade_price,
        opening_price

      ],
      type: 'spline'
      
    }
  });
}

MarketCoincandles('KRW','STEEM',30,30);
</script>