MX-Grid 가변 차트 제작

 학습목표

EXCEL의 이름 정의 기능을 사용하여 MX-Grid에서 데이터 수에 따른 가변 차트를 제작할 수 있습니다.

1. 데이터 연결

SQL을 작성하여 사용할 데이터를 가져와 출력합니다.

컨트롤 생성

MX-Grid 컨트롤을 생성하기 위해 [UI Bot > MX-Grid]를 선택합니다.

MX-Grid 디자인 실행

생성한 MX-Grid 컨트롤에서 마우스 우클릭하여 [디자인]을 클릭합니다.

데이터 생성

Dataset Manager를 사용하여 출력할 데이터셋을 생성합니다. 

1. [i-MATRIX > DB Bot > Dataset Manager]를 선택하여 데이터셋 관리자 창을 실행합니다.

1. () 클릭 후, 데이터베이스 연결 창에서 연결할 DB를 선택하고 [연결] 버튼을 클릭하여 데이터베이스를 연결합니다.

   - 연결DB : EDU_92

   

2. 쿼리 입력 창에 출력할 쿼리를 작성한 후, 데이터 미리보기 버튼을 클릭합니다.
   

   Discription

   사용된 SQL

   SQL  원본 펼치기

   SELECT
   		TO_CHAR(YEAR_MONTH, 'YYYY-MM-DD') AS "DATE"
   		,SUM(SALE) AS "SALE"
   FROM EDU.EDU_DEV_LAPTOP_SALE
   WHERE TO_CHAR(YEAR_MONTH, 'YYYY-MM') = :VS_DATE
   GROUP BY TO_CHAR(YEAR_MONTH, 'YYYY-MM-DD')
   ORDER BY TO_CHAR(YEAR_MONTH, 'YYYY-MM-DD')

3. 변수 설정 창에서 미리보기 할 변수값을 입력하고 [확인] 버튼을 클릭하여 데이터가 정상적으로 나오는지 확인합니다 .
   
   
   
   

데이터 출력

생성한 데이터셋을 원하는 위치에 출력합니다.

1. 데이터를 보고서에 출력하기 위해 출력 유형과 출력 위치를 설정합니다,
   -  출력 유형 : 표
   -  출력 위치 설정 아이콘(  ) 클릭
   
   
   
   

2.  데이터를 출력할 시트를 선택하고 출력할 임의의 셀을 선택합니다.
   -  출력 시트 :  V1
   -  출력 셀 : $A$19
   

   Description

   출력 시트

   일반적으로 데이터는 D1 시트에 출력하지만 해당 보고서는 데이터와 차트를 함께 보여주기 위해 V1 시트에 데이터를 출력하였습니다.

   
   

3. 출력 위치가 설정된 것을 확인한 후 [닫기] 버튼을 클릭하여 데이터셋 관리자를 저장하고 닫습니다.
   

2. 가변 데이터 범위 지정을 위한 이름 정의

엑셀의 이름 정의 기능과 OFFSET, COUNTA 함수를 사용하여 가변 차트의 영역을 지정할 수 있습니다.

1.  메뉴의 [수식 > 이름 정의]를 클릭하여 이름 정의 설정창을 실행합니다.
   
   
   
   

2. 이름 입력창에 정의할 이름을 입력하고 참조 대상에 수식을 입력한 뒤, [확인] 버튼을 클릭하여 첫 번째 컬럼에 대한 이름 정의를 완료합니다.
   -  =OFFSET('V1'!$A$3,0,0,MAX(COUNTA('V1'!$A$3:$A$33),1),1)
   

   Description

   OFFSET 함수

   : 시작 지점에서 입력된 수만큼 행과 열을 이동한 뒤, 높이/너비만큼 범위를 반환하는 함수

   : 시작 지점에서 입력된 수만큼 행과 열을 이동한 뒤, 높이 또는 너비만큼의 범위를 반환합니다.

   
   

   *함수 구문

   = OFFSET(reference, rows, cols, [height], [width])

   - Reference    필수 요소입니다. 오프셋을 기본으로 할 참조입니다. 참조는 인접한 셀의 셀 또는 범위를 참조해야 합니다. 그렇지 않으면 OFFSET이 #VALUE! 오류 값을 반환합니다.

   - rows    필수 요소입니다. 왼쪽 위에 있는 셀이 참조할 위 또는 아래에 있는 행의 수입니다. rows 인수로 5를 사용하면 참조의 왼쪽 위 셀이 참조보다 5행 아래로 지정됩니다. rows는 양수(시작 참조보다 아래) 또는 음수(시작 참조보다 위)일 수 있습니다.

   - cols    필수 요소입니다. 결과의 왼쪽 위 셀이 참조할 왼쪽 또는 오른쪽에 있는 열의 수입니다. cols 인수로 5를 사용하면 참조의 왼쪽 위 셀이 참조에서 5열 오른쪽으로 지정됩니다. cols는 양수(시작 참조에서 오른쪽) 또는 음수(시작 참조에서 왼쪽)일 수 있습니다.

   - height    선택 요소입니다. 반환되는 참조의 높이(단위: 행 수)입니다. height는 양수여야 합니다.

   - width    선택 요소입니다. 반환되는 참조의 너비(단위: 열 수)입니다. width는 양수여야 합니다.

   인수	필수 여부	설명
   Reference (기준셀)	O	행과 열을 이동하기 위한 기준점 (셀 위치)
   rows (행이동)	O	시작셀 기준 아래로 이동할 셀 개수 지정 ( 양수는 아래, 음수는 위로 이동)
   cols (열이동)	O	시작셀 기준 오른쪽으로 이동할 셀 개수 지정 ( 양수는 오른쪽, 음수는 왼쪽으로 이동)
   height (높이)	X	행/열로 이동한 위치에서. 선택할 행의 셀 개수 지정 (음수일 때, 위로 확장) * 생략 시 기본값 1로 지정
   width (너비)	X	행/열로 이동한 위치에서. 선택할 열의 셀 개수 지정 (음수일 때, 왼쪽으로 확장) * 생략 시 기본값 1로 지정

   ▶ #VALUE 오류 : 시작지점 인수는 하나의 기준 셀 값으로 입력되어야 합니다. 범위로 입력한 경우 #VALUE 오류를 출력합니다.

   
   

   COUNTA 함수

   : 범위에서 비어 있지 않은 셀의 개수를 셉니다.

   
   

   *함수 구문

   = COUNTA(value1, [value2], ...)

   인수	필수 여부	설명
   value1	O	개수를 세려는 값을 나타내는 첫째 인수
   value2	X	최대 255개 인수까지 계산할 값을 나타내는 추가 인수

   ▶주의할 점 : 오류 값과 빈 텍스트("")를 포함하여 셀에 들어 있는 정보의 유형에 상관없이 셀 개수를 셉니다.

   빈 문자열을 반환하는 수식이 범위에 포함되어 있으면 COUNTA 함수는 해당 값을 개수에 포함하고 빈 셀은 COUNTA 함수에서 개수를 셀 때 제외됩니다.

3. 메뉴의 [수식 > 이름 정의]를 한 번 더 클릭하여 두 번째 컬럼에 대한 이름을 정의합니다. 

   -  =OFFSET('V1'!$A$20,0,1,MAX(COUNTA('V1'!$A$20:$A$50),1),1)
   

   Description

   가변 차트 제작 시 함수 사용법

   첫번째 컬럼 예시	두번째 컬럼 예시

   - 데이터의 시작점은 통일합니다.

   - 첫 번째 컬럼과 두 번째 컬럼을 비교하면 [cols]에 해당하는 부분만 다른 걸 확인할 수 있는데, 데이터를 출력하는 컬럼의 수 만큼 이름 정의를 해 주어야 합니다. 이때 시작점으로부터 몇 번째 컬럼인지 표기합니다.

   - 데이터의 로우 수는 가져오는 데이터의 건수에 따라 차이가 나기 때문에 [데이터의 로우를 계산할 영역]은 가져올 데이터보다 더 많은 영역으로 잡아줍니다.

3. 차트 생성

차트를 생성하고 정의한 이름을 사용하여 데이터를 연결시킵니다.

1. 메뉴의 [삽입 > 추천 차트]를 클릭하여 차트 삽입창을 실행한 뒤, [묶은 가로 막대형]을 선택하고 [확인] 버튼을 클릭하여 차트를 생성합니다.
   
   
   
   
2. 생성한 차트를 마우스 우클릭하여 [데이터 선택]을 클릭합니다.
   
   
   
   
3.  테이터 원본 선택 창에서 좌측 범례 항목(계열)의 [편집] 버튼을 클릭합니다.
   
   
   
   
4. 계열 편집 창에서 계열값에 '현재 시트 명'!정의한 Y축 이름을 입력하고 [확인] 버튼을 클릭합니다.
   -  ='V1'!SALE 
   
   
   
   
5. 테이터 원본 선택 창에서 우측 가로 (항목) 축 레이블의 [편집] 버튼을 클릭합니다.
   
   
   
   
6. 축 레이블 편집 창에서 축 레이블 범위에 '현재 시트 명'!정의한 X축 이름을 입력하고 [확인] 버튼을 클릭합니다.
   
   
   
   
7. 설정을 완료하고 차트에 데이터가 정상적으로 연결되었는지 확인하고 [SAVE] 버튼을 클릭하여 파일을 저장합니다.
   
   
   
   

8. i-AUD 디자이너에서 [실행] 버튼을 클릭하여 파일이 정상적으로 저장되었는지 확인합니다.
   

   Description

   데이터가 보이지 않아요
   

   조회조건에 대한 값을 넘겨주지 않았기 때문에 차트와 데이터가 나타나지 않는 것은 정상입니다.

4. 조회조건 설정

i-AUD 디자이너에서 조회 조건 컨트롤을 생성하여 데이터의 조회 조건을 설정합니다.

1.  라벨(Label) 생성
   

   a . Label 컨트롤을 생성하기 위해 [UI Bot > Label]을 선택합니다.

   
   
   
   b. Label의 속성을 변경합니다.
   - Text : 기준년월
   
   
   
   
2. 캘린더(Calender) 생성
   a. Calender 컨트롤을 생성하기 위해 [UI Bot > Calender > Month]를 선택합니다.
   
   
   
   b. Calender의 속성을 변경합니다.
   - Name: VS_DATE
   - InitDate : 2022-02
   - DateFormat : yyyy-MM
   
   
   
   
3.  [실행] 버튼을 클릭하여 데이터가 정상적으로 출력되는지 확인합니다.
   
   
   
   
4. 조회조건을 변경하여 가변 차트가 정상적으로 출력되는지 확인합니다.
   
   
   
   
5. 보고서를 저장하여 실습을 종료합니다.