Pie-Chart 데이터 바인딩

SQL DataSource 바인딩

1. Pie-Chart 컨트롤 생성하기

i-AUD Designer 창 컨트롤 그룹에서 UI Bot →  Chart 목록을 클릭하여 Pie-Chart 컨트롤을 화면에 배치합니다.

2.  SQL Dataset 생성하기

1. 컨트롤 그룹에서 편집 그룹 → Script Editor 메뉴를 선택합니다. 

2. Script Editor창이 실행되면 왼쪽 Data Souce 폴더를 마우스 우 클릭 하여 New를 선택합니다.

3. 왼쪽 Data Souce 폴더에 생성된 Data1 항목을 마우스 우 클릭 하여 Source명을 변경 한 뒤,  Connection 드롭다운 목록을 이용하여 연결할 DB를 선택합니다.

4. SQL 입력 창에 실행할 SQL 문을 작성합니다.

SQL 입력 후 [Execute] 버튼이나 F5 키를 입력하여 데이터를 미리 볼 수 있습니다. 쿼리가 모두 작성되었으면 상단에 [저장] 버튼을 클릭하여 저장합니다.

SELECT PROD_M_NM
,SUM(SALE_ACT) AS 매출실적
FROM EDU_DEV_SALES
WHERE SALE_ACT > 0
GROUP BY PROD_M_NM
ORDER BY SUM(SALE_ACT)DESC

3. Chart 컨트롤에 DataSource 연결하기

1. Chart 컨트롤을 선택한 후 오른쪽 차트 속성 창의  Data > DataSource를 생성한 DataSource로 설정하여 데이터를 바인딩합니다.

데이터 바인딩이 설정되었으면 실행 버튼을 클릭합니다. 

2. Chart 컨트롤에 DataSource가 연동된 것을 확인할 수 있습니다.

List-Grid 바인딩

1. Pie-Chart와 List-Grid 컨트롤 생성하기

1. i-AUD Designer 창 컨트롤 그룹에서 UI Bot →  Chart 목록을 클릭하여 Pie-Chart 컨트롤을 화면에 배치합니다.  

2. i-AUD Designer 창 컨트롤 그룹에서 UI Bot →  Grid 목록을 클릭하여 List-Grid 컨트롤을 화면에 배치합니다.

2. SQL Dataset 생성하기 

1. 컨트롤 그룹에서 편집 그룹 → Script Editor 메뉴를 선택합니다. 

2. Script Editor 창이 실행되면 왼쪽 Data Souce 폴더를 마우스 우 클릭 하여 New를 선택합니다. 

3. 왼쪽 Data Souce 폴더에 생성된 Data1 항목을 마우스 우 클릭 하여 Source명을 변경 한 뒤,  Connection 드롭다운 목록을 이용하여 연결할 DB를 선택합니다.

4. SQL 입력 창에 실행할 SQL 문을 작성합니다.

SQL 입력 후 [Execute] 버튼이나 F5 키를 입력하여 데이터를 미리 볼 수 있습니다. 쿼리가 모두 작성되었으면 상단에 [저장] 버튼을 클릭하여 저장합니다.

SELECT PROD_M_NM
,SUM(SALE_ACT) AS 매출실적
FROM EDU_DEV_SALES
WHERE SALE_ACT > 0
GROUP BY PROD_M_NM

3. List-Grid 컨트롤에  DataSource 연결하기

1. List-Grid 컨트롤을 선택한 후 오른쪽 차트 속성 창의  Data > DataSource를 생성한 DataSource로 설정하여 데이터를 바인딩합니다.

데이터 바인딩이 설정 되었으면 실행 버튼을 클릭합니다.

4. Chart 컨트롤에 List-Grid 연결하기

1. Chart 컨트롤을 클릭하고 우측 속성 창  Data 항목에 List-Grid 드롭 다운 목록을 이용하여 DataGrid 컨트롤을 바인딩 합니다.

Data 바인딩이 설정 되었으면 실행 버튼을 클릭합니다. 

2. Chart 컨트롤에 List-Grid의 데이터가 바인딩된 것을 확인할 수 있습니다.

5. Chart에 표현할 List-Grid 영역 지정하기

Chart 컨트롤에 List-Grid 컨트롤을 바인딩 할 경우 한 개의 로우 영역 값만 나타나게 됩니다.

LIst-Grid의 여러 개의 로우로 영역을 지정하고자 할 경우 스크립트를 작성하여야 합니다. 

1. 컨트롤 그룹에서 편집 그룹 → Script Editor 메뉴를 선택합니다. 

2. JScript* 창 목록에서 왼쪽 하단 이벤트 목록을 더블 클릭하면 이벤트가 자동으로 스크립트 입력 창에 작성됩니다.

3. List-Grid의 영역을 스크립트로 작성하여 저장 버튼을 클릭합니다.

 < Row 단위의 시작은 1이 아닌  0부터 시작됩니다.

/**************************************
 * 컨트롤에 데이터셋이 바인딩된 후 발생합니다.
 * * arguments :  
 *		 string	Id (Readonly:False) : 컨트롤이름 
 *		 int	RecordCount (Readonly:False) : 데이터셋의 레코드 수량 
**************************************/
 var OnDataBindEnd  = function(sender, args){
   if(args.Id == "DataGrid"){
		var grid = Matrix.getObject("DataGrid");
		grid.SelectRowRange(0 ,9);
		
	}
 };

3. 실행 버튼을 클릭하여 Chart 컨트롤에 List-Grid에서 지정한 영역의 데이터가 바인딩된 것을 확인합니다.

Olap-Grid 바인딩

1. Pie-Chart와 Olap-Grid 컨트롤 생성하기

1. i-AUD Designer 창 컨트롤 그룹에서 UI Bot →  Chart 목록을 클릭하여 Pie-Chart 컨트롤을 화면에 배치합니다.

2. i-AUD Designer 창 컨트롤 그룹에서 UI Bot →  Grid 목록을 클릭하여 Olap-Grid 컨트롤을 화면에 배치합니다.

2. Olap-Grid 데이터 연결하기

1. Olap-Grid 컨트롤을 선택하고 마우스 우 클릭하여  데이터소스 항목을 선택합니다.  

2. i-META File을 이용하여 데이터를 연결합니다.

   - 편집 그룹→  Script Editor에 Data Source를 이용하시는 방법도 있습니다. (SQL 바인딩 참조)

3. 실행 버튼을 클릭하여 Olap-Grid에 데이터가 출력되는 것을 확인합니다.

3. Chart 컨트롤에 Olap-Grid 연결하기

1. Chart 컨트롤을 클릭하고 우측 속성 창  Data 항목에 Olap-Grid 드롭 다운 목록을 이용하여 생성한 OlapGrid 컨트롤을 바인딩합니다.

4. Chart에 표현할 Olap-Grid 데이터 영역 지정하기

 Olap-Grid를 Chart에 바인딩 할 경우 Chart에 표시할 데이터 영역을 반드시 지정해야 합니다.

1. Olap-Grid를 마우스 우 클릭하여 디자인 항목을 선택합니다.

2. 설정 탭 자동 선택 영역에 활성화 체크 후 범위를 지정합니다.

   범위는 0 이상의 정수로 입력합니다. (이해를 돕기 위해 컨트롤의 위치를 변경하였습니다)

3. 실행 버튼을 클릭하여 Chart 컨트롤에 Olap-Grid에서 지정한 영역의 데이터가 바인딩된 것을 확인합니다.