# 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>

- highcharts.js 파일은 highsoft의 highcharts입니다. IBChart를 이용하려면 `highcharts`를 반드시 사용해야 합니다.
- highcharts.js는 기본으로 포함시키고 필요에 따라 highcharts의 module를 추가해서 사용합니다.

## 차트 객체 생성

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

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>

- jQuery 라이브러리 사용 객체 생성 방법

    <!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("조회가 완료되었습니다.");
    });

3. 조회된 데이터(JSON or XML) 차트에 적용하기 [필수]
   loadSearchData 함수를 이용해 조회된 데이터를 적용시킵니다.