[기초 강좌] 히포차트 데이터베이스(DB 디비) 연동하는 방법

 

:: Hippochart Database 연결하여 차트 그리는 방법

 

 

 히포차트 시작하기 페이지를 참고하셔도 좋습니다.

 http://www.hippochart.com/hippo/intro4.aspx 

 

 

 

히포차트를 사용할 경우 반드시 하는 작업이 디비를 연동하는 방법일텐데요, 사실 가장 간단하고 기본적인 내용인지라 오히려 강좌가 누락되는 경우가 발생하여, 그리고 의외로 많은 분들이 처음 시작하실때 궁금해하시는 것 같아 한 번 정리를 해봅니다.

 

 

 

히포차트의 구조가 위와 같은 시리즈 구조를 이룬 다는 것은 이제 모두(?) 아실 것입니다. 즉, 히포차트를 그리기 위해서는 시리즈 셋 을 만들어야하는데요,

 

사용자 데이터 ===> 시리즈 구성 ===> 히포차트

 

와 같은 플로우입니다. 그럼 어떻게 내가 가지고 있는 디비 혹은 데이터소스를 시리즈로 만드느냐???? 방법은 여러가지가 있습니다. 크게 두가지 방법인데요,

 

 

1. 직접 하나하나 만들기

 

먼저 소개해드릴 방법은 시리즈 구성을 직접 하는 방법입니다. 혹시 ADO.NET 디비 연결하는 객체들 중에 DataTAble 이라는 놈 기억하시는지요? ^^ 거기 보시면

 

DataSet > DataTable > Datarow 

 

와 같은 애들이 있습니다. 마찬가지로 히포차트도

 

SeriesList > Series > SeriesItem

 

으로 구성되어 있으며 역시 마찬가지로 모두 컬렉션(Collection) 객체들입니다. 직접 만든다는 것은 이러한 구성을 순서대로 차례차례 하여 for 구문 등을 이용하여 작성하는 것으로 DB 를 직접 조회하여 아래와 같은 형태로 만드는 방법입니다.

 

DataTable dt = conn.getData(); // 이렇게 사용자가 직접 데이터를 조회합니다.  

 

// 히포차트 시리즈리스트 생성

SeriesList slist = new SeriesList();

 

// 히포차트 시리즈 생성

Series sr = new Series();

 

slist.SeriesCollection.add(sr);

 

foreach(DataRow row in dr.Rows)

{

     SeriesItem item = new SeriesItem();

     item.Name = row["username"].ToString());;

     item.YValue = double.parse(row["uservalues"].ToString());

 

     sr.items.add(item);

}

 

 

네, 이런 형태입니다. 시리즈리스트를 만들고 그 안에 시리즈를 구성하고 다음 데이터들을 시리즈아이템으로 만들어 넣어주면 끝!

사실 이런 내용은 히포차트의 아무 샘플이나 보시면 그 구성을 짐작하실 수 있습니다.

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=ChartType&type=Column

 

디비를 조회하여 시리즈를 직접 구성하는 방법을 알아보았는데요, 물론 이보다 쉬운 방법이 있습니다 (아래 계속) 다만 이런 방법을 알아두어야하며 이렇게 해야할때가 있으므로 알아두시는 것이 좋을듯 하네요 ^^

 

 

 

 

 

2. 히포엔진(HippoEngine)으로 쉽게 만들기

 

위와 같은 기본적인 방법이 있더라도 히포차트에서는 저렇게 코드를 짜시도록 놔두지 않습니다;;; 보다 쉽고 빠르게 즉 아래를 보시면

 

사용자 데이터 ===> 히포엔진 ===> 시리즈 구성 ===> 히포차트

 

맞습니다. 저 사이에 히포엔진이 위치하여 데이터만 부어주면 시리즈를 짠 하고 만들어서 던져줍니다. 아래 예제를 볼까요??

 

 

DataTable dt = conn.getData(); // 이렇게 사용자가 직접 데이터를 조회합니다. 여기 까지는 똑같습니다.   

 

// 히포차트 시리즈리스트 생성

SeriesList slist = new SeriesList();

 

// 여기까지도 똑같은데 이제부터 히포엔진이 들어갑니다.

 

HippoEngine en = new HippoEngine();

slist = en.GetSeriesList(dt, "nameColumn", "valueColumn1", "valueColumn2");

 

 

 

 

 

 

이해되셨나요??

기존에는 디비 연결해서 루프를 돌려서 하나하나 값 선언하고 넣어줬다면 여기서는 히포엔진 하나 생성해놓고 GetSeriesList 호출할때 데이터테이블을 넣고 이름과 값들만 정해주면 끝입니다!!

 

간편하죠?? 코드가 팍 줄었습니다. 이제 기본 시리즈리스트가 구성이 완료되었으니  

 

 

this.hHippoChart1.SeriesListDictionary.Add(slist);
this.hHippoChart1.DrawChart(); 

 

 

그것을 히포차트에 넣어주고 그리기만 하면 완성입니다 ^^

 

 

 

 

3. 히포엔진(HippoEngine)으로 디비 직접 조회하기

 

자... 다음으로는 디비도 조회하기도 싫다. 히포차트 너가 다해라~ 라고 할때 방법입니다. 이 방법은 장비연동 혹은 윈도우즈폼일 경우에만 사용하시면 될듯하고요 일반적으로 웹일 경우 직접 디비를 엑세스 하지 않으므로 넘어가셔도 좋습니다. 모양은 아래와 같은 형태라고 할 수 있습니다.

 

히포엔진(사용자데이터) ==> 시리즈 구성 ==> 히포차트

 

 

다시 샘플을 보죠 !!

 

DataTable dt = conn.getData(); // 이렇게 사용자가 직접 데이터를 조회합니다.  

 

// 위 내용이 없어집니다. 왜냐?? 히포차트에서 디비까지 조회를 하기 때문이죠.  

 

 

 

// 히포엔진의 또다른 기능 직접 조회

HippoEngine en = new HippoEngine();
en.DataType = DataSourceType.Default; // 디폴트는 SQL SERVER 입니다.
en.ConnectionString = "localhost; uid=sa; pwd=1; database=HippoChart";
en.Query = "SELECT * FROM MemberTable where userid='neohippo'  ";

 

SeriesList slist = en.GetSeriesList("nameColumn", "valueColumn1", "valueColumn2");

 

this.hHippoChart1.SeriesListDictionary.Add(slist);
this.hHippoChart1.DrawChart(); 

 

 

사용자가 디비를 조회하던 첫 줄이 사라지고 바로 히포엔진이 출동합니다.

디비를 조회하기 위해서 필요한 연결문자열과 쿼리 속성에 값이 채워지고 GetSeriesList  메소드에서도 dt 가 사라졌습니다. 직접 조회를 하기 때문에 넘겨줄 필요가 없죠 !

Default 라고 되어 있는 부분은 SQL 서버 디비를 의미하며 기타로 엑셀, 엑세스, 오라클, MySQL 등 많은 데이터소스를 지원합니다.

 

 

 

이렇게 3가지 형태로 디비를 조회하는 방법을 알아보았습니다.

 

가장 추천되는 방법은 2번입니다. 3번일 경우 편리하지만 간단한 테스트나 작은 솔루션일 경우에 맞으며 엔터프라이즈 환경에서는 1, 2, 번을 사용하는 것이 옳습니다.

 

최대한 친근하고 ㅎㅎ 상세하게 작성할려고 노력했는데 이해가 잘 되셨으면 좋겠습니다 ^^

 

감사합니다.