티스토리 뷰

프로그래밍/Web

HighChart를 활용한 웹/모바일 호환 그래프 만들기~

루키~ 2015. 6. 5. 09:13

하이차트(high chart)의 가장 큰 장점은 자바스크립트 기반으로 웹과 모바일을 모두 지원한다는 점이다.

모바일 트래픽이 증가함에 따라 최근 하이차트(high chart)를 그래프 툴로 활용하는 경우를 종종 볼 수 있다.

웹에서 사용할 수 있는 무료 그래프 툴에 대하여 에서 여러가지 그래프 툴을 설명했었는데, 오늘은 하이차트의 활용에 대해 정리해보도록 한다.

하이차트(highchart) 설치

하이차트를 설치하는 것은 매우 간단하다.

jQuery와 같은 자바스크립트를 추가하고 이어서 하이차트의 자바스크립트를 포하하면 된다.

주의할 점은 순서가 jQuery 다음에 하이차트라는 것이다.

가끔 highcharts.js 파일을 jquery.min.js보다 앞에 써서 오류가 발생하는 경우가 있다.

하이차트(highchart) 예제

하이차트 사이트에 있는 내용으로 간단한 만든 다음 소스를 살펴보자.

41번째 줄의 <div> 태그의 id 값 (container)을 12번째 줄의 스크립트에서 참조해서 하이차트를 그린 것을 주의 깊게 봐야 한다.

HTML과 JQuery 문법 일부만 알면 정말 쉽게 하이차트를 활용할 수 있다.

실제 하이차트와 관련해서는 많은 소스와 데모가 사이트에 나와 있다.

기본적인 차트 이외에 주식 차트를 위한 high stock, 지도를 위한 high map도 있으니 살펴보면 된다.

Ajax로 값을 가져오기

실제 차트를 그리기 위해서는 값을 외부에서 가져와야 하는 경우가 많다.

Ajax로 값을 가져오도록 호출하고 해당 데이터가 리턴되었을 때부터 그래프를 그리는 소스는 하이차트 사이트의 Ajax 데모를 보면 된다.

중간에 Ajax를 처리하기 위한 $.getJson(...) 이 추가 된 것을 알 수 있다.

json 타입의 데이터를 가져와서 변환해 사용하는 부분은 high stock의 다음 예제를 살펴보면 된다.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {

// split the data set into ohlc and volume
        var ohlc = [],
            volume = [],
            dataLength = data.length,
            
            ....

i = 0;

for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);

volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }

// create the chart
        $('#container').highcharts('StockChart', {

.....

series: [{
                type: 'candlestick',
                name: 'AAPL',
                data: ohlc,
                 
                .....
                 
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,

.....
                
            }]
        });
    });
});

13~26번째 줄이 json 타입으로 리턴된 데이터를 내부에서 사용할 ohlc와 volume 변수에 저장하는 부분이다.

그리고 하단의 series에서 해당 변수를 사용해서 차트를 그린 것을 확인할 수 있다.

json으로 값을 가져와서 위와 같은 형태의 배열로 변환해 활용하면 된다.

만약 멀티 차트를 그리기 위해 여러 개의 ajax를 호출해야 한다면,

다음 소스를 참고하는 것이 좋다.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/

위 예제는 세 종류의 값을 가져오는 부분을 $.each(names, ... 형태로 반복해서 호출해 처리하고 있다.

여러가지 차트를 한번에 그릴 때 활용하면 좋을 듯 하다.

하이차트(highchart)에서 흔히 하기 쉬운 실수들

이제 highchart를 사용하면서 자주 하는 실수를 정리해 보려고 한다.

첫번째는 데이터에 문자열을 넣어서 발생하는 오류이다.

하이차트는 숫자를 가지고 그래프를 그리는 형태이기 때문에 당연히 값으로 숫자가 넘어올 것을 기대하고 있다.

숫자 대신 다음과 같은 형태로 문자를 전달하면 Highcharts Error #14와 같은 오류가 발생한다.


series: [{
	data: ["3", "5", "1", "6"]
}]

두번째는 데이터 정렬과 관련된 문제이다.

그래프에서 X축이 되는 데이터가 정렬되어 있지 않은 경우에 Highcharts Error #15와 같은 오류가 발생한다.

성능상의 이유로 하이차트 내부에서는 데이터 정렬을 하지 않는다.

그러므로 라인 차트나 주식 차트를 사용할 때는 반드시 정렬된 데이터를 제공해야 한다.

'프로그래밍 > Web' 카테고리의 다른 글

반응형 웹을 위한 부트스트랩 활용하기 (0)	2015.06.12
부트스트랩 슬라이더 만들기 (0)	2015.06.10
모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트 (0)	2015.06.03
PHP를 활용하여 DB 내용을 JSON으로 출력하기 (0)	2015.05.18
PHP4에서 JSON 설치하기 (0)	2015.05.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

루키의 보석함