Easy Heading Macro

navigationTitle	목차
selector	h1,h2
navigationExpandOption	expand-all-by-default
navigationWidth	225

실습 예제 ｜차트를 활용한 경영 현황 대시보드 화면

Multimedia

name	[i-AUD] 6. Chart 1.mp4
width	100%
height	20%

Multimedia

name	[i-AUD] 6. Chart 2.mp4
width	100%
height	20%

Multimedia
name [i-AUD] 6. Chart 3.mp4
width 100%
height 20%

Image Removed

목표화면

Image Added

참고사항

title	경영 현황 Template

실습 Template 다운로드

위 실습 예제를 학습하기 위한 실습 Template는 Template은 아래의 보고서를 다른 이름으로 저장하여 사용합니다.

경영 현황 Template 사용 방법
1. 포털에서 보고서를 실행합니다.
  
  템플릿 위치 : [TBD] PPDM > [ Templates ] > [31. Sample] > [Dashboard] > "조회화면 > 대시보드 > Template_경영 현황"
  Image RemovedImage Added
2. 우측 상단의 (다른 이름으로 저장) 버튼을 클릭하여 작업할 폴더에 저장합니다.
3. 저장한 보고서를 실행합니다.
4. 우측 상단의 (보고서 편집) 버튼을 클릭하여 디자이너 창을 실행합니다.

Step 1. 조회 조건 컨트롤 생성하기

데이터 조회를 위한 컨트롤을 생성합니다.

1.1 컨트롤 불러오기

상단 메뉴 영역에서 [UI Bot]을 클릭하여 ComboBox, Calendar, Label 컨트롤을 생성

1.2 컨트롤별 속성 설정

우측 컨트롤 속성 편집 영역에서 다음과 같이 Calendar의 속성을 지정해줍니다.
- Name : VS_YM_F
- Name2 : VS_TMYM_T
- InitValue : DATE(0,-12,0);DATE(0,0,0)
우측의 컨트롤 속성 편집 영역에서 다음이 ComboBox의 속성을 설정합니다.
- Name : VS_PRODUCT
- DataSource : CB_상품대분류
  더보기 > [ 공통 데이터 소스 ] > "CB_상품대분류"
- UseAllItems 활성화
- AutoRefresh 활성화
우측의 컨트롤 속성 편집 영역에서 다음이 영역에서 Label의 속성을 설정합니다.
Name Text
LB_조회년월 조회년월
LB_제품군 제품군

Step 2.

...

Chart와 OlapGrid 연결

차트 속성을 활용하여 데이터를 Olap-Grid OlapGrid와 연결합니다.

2.1

...

OlapGrid 설정

보고서 하단의 DATA Form을 클릭하여 이동합니다.
Olap-GridOlapGrid 컨트롤 생성
컨트롤 속성 변경
- Name : OlapGrid1
- AutoRefresh 활성화
Image Removed
Olap-Grid 우 클릭하여
OlapGrid 데이터 소스 연결하고 AutoRefresh를 활성화합니다.
정보
title OlapGrid 데이터소스 연결
OlapGrid를 우 클릭 > 데이터소스 > i-META 메뉴를
실행하여 "
선택해 매출분석
" META 파일의 데이터를 연결합니다.
META 파일 경로 : [TBD] > [Templates] > [3.Sample] > [OLAP]
META 파일 선택
▪ 매출분석 경로 : 공용폴더 > PPDM > Sample > 3. i-META > "매출분석"

정보
title AutoRefresh 활성화
각 OlapGrid를 선택해서 나타나는 우측 속성 창에서 AutoRefresh를 활성화합니다.
Image Added

년월 : BETWEEN 연산자로 변경하고
Name 조회 항목 조회 조건 연산자 변수명
OlapGrid1
Column : [년월]
Row : [상품대분류]
Data : [매출수량]
조회 조건 영역에 년월, 상품대분류 필드를 배치합니다.
[년월] BETWEEN :VS_
FROM,
YM_F ~ :VS_
TO 변수 입력상품대분류 : @:
YM_T
[상품대분류] = @:VS_PRODUCT
변수 입력
설정 탭으로 이동
- 자동 선택 영역 활성화
- 범위 : 오른쪽 12, 아래쪽 4
Image Removed

2.2 Chart 설정

보고서 하단의 MAIN Form을 클릭하여 이동합니다.
MAIN Form으로 돌아와서 Chart 컨트롤 생성

Image Removed
컨트롤 속성 변경

Name : Chart1
Olap-Grid : DATA.OlapGrid1

Image Removed
차트 유형 변경

차트 유형 : 곡선형

Image Removed
Chart 컨트롤을 우 클릭하여 디자인 창을 실행한


OlapGrid2	Column : [년월] Data : [매출금액, 매출원가]	[년월]	BETWEEN	:VS_YM_F ~ :VS_YM_T
OlapGrid2	Column : [년월] Data : [매출금액, 매출원가]	[상품대분류]	=	@:VS_PRODUCT
OlapGrid3	Column : [매장지역] Data : [매출금액]	[년월]	BETWEEN	:VS_YM_F ~ :VS_YM_T

OlapGrid 컨트롤을 우 클릭하여 디자인 메뉴를 실행한 후 디자인 속성을 변경합니다.
Image Removed
Image Added
범례
- 위치 : Top, Right
- 방향 : Horizontal
Image Removed

보고서가 정상적으로 작동하는지 확인합니다.

Image Removed

Step 3. 월별 총 매출이익

차트 속성을 활용하여 데이터를 Olap-Grid와 연결합니다.

3.1 Olap-Grid 설정

DATA Form으로 이동하여 Olap-Grid 컨트롤 생성
Image Removed
컨트롤 속성 변경
Name : OlapGrid2

AutoRefresh

활성화

Image Removed

Olap-Grid 우 클릭하여

데이터소스

>

i-META

메뉴를 실행하여 "매출분석" META 파일의 데이터를 연결합니다.

Column : 년월

Data

: 매출금액, 매출원가

조회 조건 영역에

년월, 상품대분류

필드를 배치합니다.

년월 : BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력

상품대분류

: @:VS_PRODUCT 변수 입력

Olap-Grid 컨트롤을 우 클릭하여

디자인 창

을 실행한 후

디자인 속성

을 변경합니다.

Image Removed

필드

필드 메뉴에서

Image Removed

신규 아이콘을 클릭하여

총매출이익

계산 필드를 생성합니다.

캡션 : 총매출이익

서식

Name	필드	필드 > 계산 필드 추가	설정 > 자동 선택 영역
OlapGrid1	-	-	자동 선택 영역 활성화 범위 : 오른쪽 12, 아래쪽 4
OlapGrid2	[Measures] 필드 위치 변경 : Column > Row	캡션 : 총매출이익 서식 : {0:N0} 수식 : [매출금액] - [매출원가]

설정

자동 선택 영역 활성화
범위 : 오른쪽 12, 아래쪽 2

Image Removed

3.2 Chart 설정

...

Name : Chart2
Olap-Grid : DATA.OlapGrid2

...

매출원가 : 표시 비활성화
총매출이익 차트 유형 : 곡선형

...

위치 : Top, Right

...

보고서가 정상적으로 작동하는지 확인합니다.

Image Removed

Step 4. TOP5 지역 매출

차트 속성을 활용하여 데이터를 Olap-Grid와 연결합니다.

4.1 Olap-Grid 설정

DATA Form으로 이동하여 Olap-Grid 컨트롤 생성

컨트롤 속성 변경
- Name : OlapGrid3
- AutoRefresh 활성화

Olap-Grid 우 클릭하여

데이터소스

>

i-META

메뉴를 실행하여 "매출분석" META 파일의 데이터를 연결합니다.

Row : 매장지역

Data

: 매출금액

조회 조건 영역에

년월

필드를 배치합니다.

년월

: BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력

Olap-Grid 컨트롤을 우 클릭하여

디자인 창

을 실행한 후

디자인 속성

을 변경합니다.

필드

필드 메뉴에서

매장지역

필드를 Row에서 Column으로 이동합니다.

설정

자동 선택 영역 활성화
범위 : 오른쪽 9

MAIN Form으로 돌아와서 Chart 컨트롤 생성
Image Removed
컨트롤 속성 변경
- Name : Chart3
- Olap-Grid : DATA.OlapGrid3
Image Removed
Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
Image Removed
기본
- 차트 유형 : 곡선 영역형
계열 > 스타일
- 심볼 유형 : Circle
Image Removed
계열 > 기타
단위 : 1000000(백 만)
범례
위치
OlapGrid3
[매장지역] 필드 속성 변경 : 정렬 Image Added 클릭

Image Added
-
자동 선택 영역 활성화
범위 : 오른쪽 4
정보
title 계산필드 추가
디자인 메뉴 > 필드에서 Image Added 신규 아이콘을 클릭하여 계산 필드를 생성할 수 있습니다.
Image Added

2.2 Chart 설정

보고서 하단의 MAIN Form을 클릭하여 이동합니다.
Image Added
MAIN Form으로 돌아와서 Chart 컨트롤 생성
Image Added
각 Chart 컨트롤을 선택하여 우측 속성 메뉴에서 Name을 변경하고, DATA 폼에 생성한 OlapGrid와 연결합니다.
Name Data > OlapGrid
Chart1 DATA.OlapGrid1
Chart2 DATA.OlapGrid2
Chart3 DATA.OlapGrid3

정보
title OlapGrid 바인딩
각 Chart를 클릭해서 나타나는 우측 속성 창에서 연결하고자 하는 Grid를 지정할 수 있습니다.
Image Added

디자인 메뉴를 클릭하여 디자인 속성을 변경합니다.

Name	컨트롤 배치 영역	기본 > 차트 유형	계열	축	범례
Chart1	제품별 판매 수량	곡선형	-	-	위치 : Top, Right 방향 : Horizontal
Chart2	월별 총 매출이익	-	매출원가 : 표시 비활성화 총매출이익 차트 유형 : 곡선형	-	위치 : Top, Right
Chart3	TOP5 지역 매출액	곡선 영역형	스타일 : 배경색상 > 투명도 > 0.1 심볼 유형 > Circle 심볼 색상 > #8fb8f0 기타 : 단위 > 1000000(백 만)	PlotLines : 선 색상 > #2a3a47 선 스타일 > Dot 선 두께 > 1 표시 기준값 > 70000(칠 만) 기준값 표시 활성화	위치 : Top, Right

보고서가 정상적으로 작동하는지 확인합니다.

Image RemovedImage Added

Step

...

3. PieChart 생성

제품군별 판매현황

...

정보를 나타낼 도넛 차트를 생성합니다.

Pie-Chart 컨트롤 생성
Image RemovedImage Added
컨트롤 속성 변경
- Name : PieChart
- AutoRefresh 활성화
PieChart를 우 클릭하여 데이터소스 > i-META 메뉴를 실행하여 "
매출분석
" META 파일의 데이터를
META 파일을 활용해 데이터 소스를 연결합니다.
조회항목 :
조회 항목 조회 조건 연산자 변수명
[상품중분류, 매출금액]
조회조건 :
[년월
, 상품대분류
조회 조건 영역에 배치한 필드에 변수명을 입력
년월 : BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력

상품대분류

: @:VS_PRODUCT 변수 입력

]	BETWEEN	:VS_YM_F ~ :VS_YM_T
[상품대분류]	=	@:VS_PRODUCT

차트 유형 변경
- 차트 유형 : 도넛형
Image Removed
Image Added
Pie-Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
Image Removed
계열 범례
레이블 필드 : [상품중분류]
값 필드 :
매출금
[매출금액]
서식 : {0:N0}
범례
위치 :
Mid
Middle, Right
방향 : Vertical
Image Removed

보고서가 정상적으로 작동하는지 확인합니다.

Image RemovedImage Added

Step

...

4. Process Bot 설정하기

Process Bot을 활용하여 보고서의 동작을 설정합니다.

...

4.1 조회 버튼 생성

보고서를 조회할 수 있는 버튼을 설정합니다.

Button 컨트롤 생성
Image RemovedImage Added
컨트롤 속성 변경
- Name : BTN_RE
- Text : 조 회
Image Removed
Process Bot 아이콘(Image Removed)을 클릭하여 프로세스 봇 창을 실행하고, 버튼 컨트롤을 더블 클릭합니다.
Image Removed
Activities 탭을 클릭 후 Refresh 모듈을 더블 클릭합니다.
Image Removed
모듈 파라미터 설정
- Style > BoxStyle : BTN1
Image Added
생성한 버튼을 우 클릭하고, 동작설정 메뉴에서 Refresh를 선택합니다.
Image Added
모듈 파라미터 설정 아이콘()을 클릭하여,Refresh 동작을 설정합니다설정합니다.
Refresh 대상 Refresh 대상 : PieChart, OlapGrid1, OlapGrid2, OlapGrid3
Image RemovedImage Added

...

4.2 차트 색상 설정

Module을 활용하여 차트의 색상을 설정합니다.

Process Bot 아이콘()을 클릭하여 프로세스 봇 창을 실행하고, Report 를 더블 클릭합니다.
Image RemovedImage Added
Activities > Modules > 컨트롤별 > Chart > [Chart] 차트 색상 팔레트 지정 하기 모듈을 선택하고 값을 설정합니다.
- 차트 선택 : PieChart, Chart1, Chart2, Chart3
- 색상 값 입력
Image Removed
- 파라미터 설정이 완료되면 Report > OnDocumentLoadComplete 이벤트에 '[Chart] 차트 색상 팔레트 지정 하기' 모듈을 연결합니다.
Image Added

참고사항
icon false
title Discription
사용한 색상 코드
#8FB8F0, #2C6DC9, #2C3765, #ABC7EE, #8F96A8, #C6CAD5, #C4D9F5, #EEF1F5
Report > OnDocumentLoadComplete 이벤트에 '[Chart] 차트 색상 팔레트 지정 하기' 모듈을 연결합니다.
Image Removed

보고서가 정상적으로 작동하는지 확인합니다.

Image RemovedImage Added

페이지 트리

버전 비교

이전 버전 9

새 버전 현재

키

실습 예제 ｜차트를 활용한 경영 현황 대시보드 화면

Step 1. 조회 조건 컨트롤 생성하기

1.1 컨트롤 불러오기

1.2 컨트롤별 속성 설정

Step 2.

Chart와 OlapGrid 연결

2.1

OlapGrid 설정

2.2 Chart 설정

Step 3. 월별 총 매출이익

3.1 Olap-Grid 설정

3.2 Chart 설정

Step 4. TOP5 지역 매출

4.1 Olap-Grid 설정

2.2 Chart 설정

Step

3. PieChart 생성

Step

4. Process Bot 설정하기

4.1 조회 버튼 생성

4.2 차트 색상 설정

Name	Data > OlapGrid
Chart1	DATA.OlapGrid1
Chart2	DATA.OlapGrid2
Chart3	DATA.OlapGrid3

Name	Text
LB_조회년월	조회년월
LB_제품군	제품군

페이지 트리

페이지 이력

버전 비교

이전 버전 9

새 버전 현재

키

실습 예제 ｜차트를 활용한 경영 현황 대시보드 화면

Step 1. 조회 조건 컨트롤 생성하기

1.1 컨트롤 불러오기

1.2 컨트롤별 속성 설정

Step 2.

Chart와 OlapGrid 연결

2.1

OlapGrid 설정

2.2 Chart 설정

Step 3. 월별 총 매출이익

3.1 Olap-Grid 설정

3.2 Chart 설정

Step 4. TOP5 지역 매출

4.1 Olap-Grid 설정

2.2 Chart 설정

Step

3. PieChart 생성

Step

4. Process Bot 설정하기

4.1 조회 버튼 생성

4.2 차트 색상 설정