챠트 만들기 - highcharts + crossfilter ... highstocks

1. d3.js와 highcharts 고민하다 highcharts 선택.

본격적으로 그래프 그리기 작업 시작.

Project R을 이용해서 그릴까.. 엑셀로 그릴까...하다가

Highcharts로 그려보기로 생각함.

dbms든 s2graph든 raw 데이터만 뽑아서 던져주면 그래프 그려주도록...

d3.js를 쓸까 highcharts를 쓸까 고민하다가...

바닥부터 만드는것보다 highcharts가 수고가 좀 덜 들까 싶어서 highcharts로 시작.

더하기, highcharts를 이용해 기간 선택을 동적으로 이쁘게 할 수 있는 데모를 봐서 그쪽이 더 끌림... 왠지 더 쉬울것도 같고...

2. highcharts인줄 알았는데 highstock이였다..;;

API는 raw 데이터만 던져줌으로써 활용성을 높이고,

front에서 기본적인 javascript와 crossfilter를 이용해 raw 데이터를 series 모양에 맞게 가공 하는데까지는 성공...

분명 API 문서에는 여러 시간 단위에 맞게 groupBy를 해준다고 되어 있는데 아무리 해봐도 안되더라는...

관련 샘플이 있길레 코드 복사해서 붙여 넣기 해봐도 안되고...

그러다가...groupBy기능은 highcharts는 제공 안하고 highstock에서만 제공되는것 알게 됨..;;

문제는 highcharts는 상업용도 1개발자에 40마넌이면 되는데, highstock은 두배 값인 80마넌이나 한다.

groupBy는 좀만 손보면 crossfilter로 내가 해도 되는건데... 물론 기본제공이면 더 좋긴 하겠지만서도..;;

일단 highstock으로 성공.

다만, highcharts + crossfilter로 변경할지는 고민 중... 어차피 다양한 조합을 만들려면 crossfilter에 익숙해져야 할 듯..

흠... 아래 링크보니 부가적인 요소들을 사용하면 좋겠다 싶기는 한데... 두배 값을 할런지.. 있으면 좋기는 한데...

http://www.highcharts.com/docs/chart-concepts/understanding-highstock

3. tabular input data에 대해서는 여러 선을 한번에 그려줌

아래 두 가지와 같이 array 데이터를 rows 혹은 data.columns 옵션으로 밀어넣어주면 series를 한땀한땀 만들 필요 없다!!

오늘 삽질한거 헛짓거리 ㅠ.ㅠ

csv나 HTML table에서 데이터 뽑아오는 기능도 제공한다 하니 갠춘.

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/data/rows/

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/data/columns/

4. d3.js로 여러개 묶드시 highcharts로 여러개 묶을 수 있을까?

pie, line, column 세가지 차트를 하나로 묶는 셈플.

http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types

highstock에서 y축을 두개로 나눠서 두개의 그래프를 그려주는 방법

http://www.highcharts.com/stock/demo/candlestick-and-volume

일단 두가지 모두 하나의 Chart 객체에 여러 차트를 그리는 방식.

하나의 차트에서 클릭한게 다른 차트에도 영향을 주도록 하려면...

뭔가 다른 방법이 필요할텐데...

highstock에 있는 grouping 기능을 활용해서, 데이터는 그대로 넣어둔 상태로 외부에서 API 콜로 grouping 옵션만 조정하면 되려나??