Bar Chart 데이터 바인딩

배포 버전 안내

Release No : 7.0.400.20230502

SQL DataSource 바인딩

1. Chart 컨트롤 생성하기

i-AUD Designer 창 컨트롤 그룹에서 UI Bot → Chart 목록을 클릭하여 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

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

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

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

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

List-Grid 바인딩

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

1. i-AUD Designer 창 컨트롤 그룹에서 UI Bot → Chart 목록을 클릭하여 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에서 지정한 영역의 데이터가 바인딩된 것을 확인합니다.