Quick Start

설치

IBChart 를 사용하기 위해 아래 4가지 js 파일을 include 합니다.

<script type="text/javascript" src="/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/chart/ibleaders.js"></script>
<script type="text/javascript" src="/chart/ibchartinfo.js"></script>
<script type="text/javascript" src="/chart/ibchart.js"></script>

차트 객체 생성

차트 객체 생성은 차트가 만들어질 컨테이너가 구성된 이후에 설정 할 수 있습니다.

  1. body 태그 하위에 컨테이너로 사용할 div를 생성 하고, body 태그의 onload 이벤트로 생성하는 방법
  2. jQuery 라이브러리를 사용하는 경우 $(document).ready(); 에서 설정하는 방법
<!DOCTYPE html>
<html>
<head><script type="text/javascript">
// 일반적으로 사용 시
function fnLoadPage() {
// 차트 객체 생성
  createIBChart("cont", "myChart", {
      width:"500px",
      height:"500px"
  });
}
</script>
</head>
<body onload="fnLoadPage();">
  <div id="cont"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><script type="text/javascript">
// jQuery 라이브러리 사용시
$(document).ready(function() {
  // 차트 객체 생성
  createIBChart("cont", "myChart", {
    width:"500px",
    height:"500px"
  });
});
</script>
</head>
<body>
  <div id="cont"></div>
</body>
</html>

차트 구성 옵션 설정

차트 객체 생성 완료 후 setOptions method를 이용하여 차트 구성 옵션을 설정합니다.chart Properties 참고

<!DOCTYPE html>
<html>
<head><script type="text/javascript">
  // 일반적으로 사용 시
  function fnLoadPage() {
  // 차트 객체 생성
  createIBChart("cont", "myChart", {
    width:"500px",
    height:"500px"
  });

  // 차트 구성 옵션 설정
  myChart.setOptions({
    // 사용자 설정
  });
}
</script>
</head>
<body onload="fnLoadPage();">
  <div id="cont"></div>
</body>
</html>

조회된 데이터 사용

조회된 데이터를 차트에 동적으로 적용합니다. 이를 위한 단계는 아래와 같습니다.

  1. 조회 데이터(JSON or XML) 생성하기 [필수] ※ 데이터 구조 참고

  2. 조회 완료 이벤트 처리하기 [선택]

myChart.setEventListener("searchEnd", function(event) {
  console.log("조회가 완료되었습니다.");
});
  1. 조회된 데이터(JSON or XML) 차트에 적용하기 [필수]
    loadSearchData 함수를 이용해 조회된 데이터를 적용시킵니다.