AUD PLATFORM
페이지 트리

버전 비교

이전 버전 1

changes.mady.by.user guide

에 저장

비교대상

새 버전 현재

changes.mady.by.user guide

에 저장

키

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

Easy Heading Macro
navigationTitle목차
selectorh1,h2
navigationExpandOptionexpand-all-by-default
navigationWidth225

...


...

실습

...

Release No : 7.0.500.20240516

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

Multimedia
name[i-AUD] 6. Chart 1.mp4
width100%
height20%

Multimedia
name[i-AUD] 6. Chart 2.mp4
width100%
height20%

Multimedia
name[i-AUD] 6. Chart 3.mp4
width100%
height20%


참고사항
title경영 현황 Template

실습 Template 다운로드

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

  • 경영 현황 Template 사용 방법
    1. 포털에서 보고서를 실행합니다.

      템플릿 위치 : [교육] > [개발자교육] > [Template] > "2. 경영 현황 대시보드"



    2. 우측 상단의 (다른 이름으로 저장) 버튼을 클릭하여 작업할 폴더에 저장합니다.

    3. 저장한 보고서를 실행합니다.

    4. 우측 상단의 (보고서 편집) 버튼을 클릭하여 디자이너 창을 실행합니다.




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

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


1.1 Calendar 생성

  1. 상단 메뉴 영역에서 [UI Bot] > [Calendar] > [Month]를 클릭해 Calendar 컨트롤을 생성합니다.



  2. 우측의 컨트롤 속성 편집 영역에서 다음과 같은 속성을 설정합니다.
    • Name: VS_YEAR
    • InitValue : 202204

         

1.2 ComboBox 생성

  1. 상단 메뉴 영역에서 [UI Bot] > [ComboBox] > [Combo]를 클릭해 ComboBox 컨트롤을 생성합니다.


  2. 우측의 컨트롤 속성 편집 영역에서 다음과 같은 속성을 설정합니다.
    • Name : VS_PRODUCT
    • DataSource : 제품
    • UseAllItems 활성화
    • AutoRefresh 활성화

         

Step 2. 제품별 판매수량

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


2.1 Olap-Grid 설정

  1. Olap-Grid 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : OlapGrid1
    • DataSource : OLAP
    • AutoRefresh 활성화
  3. Olap-Grid 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  4. 필드 변경
    • Column : MONTH_CD
    • Row : NM
    • Data : 판매수실적


  5. 설정 
    • 자동 선택 영역 활성화
    • 범위 : 오른쪽 12, 아래쪽 9


  6. Olap-Grid 컨트롤 숨기기


2.2 Chart 설정

  1. Chart 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : Chart1
    • Olap-Grid : Form.OlapGrid1


  3. 차트 유형 변경
    • 차트 유형 : 직선형


  4. Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  5. 범례
    • 위치 : Middle, Right
    • 방향 : Vertical

...

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

         

Step 3. 월별 계획대비 판매현황

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


3.1 Olap-Grid 설정

  1. Olap-Grid 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : OlapGrid2
    • DataSource : OLAP
    • AutoRefresh 활성화

  3. Olap-Grid 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  4. 필드 변경
    • Column : MONTH_CD
    • Row : Measure
    • Data : 판매실적금액, 판매계획금액


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


  6. Olap-Grid 컨트롤 숨기기


3.2 Chart 설정

  1. Chart 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : Chart2
    • Olap-Grid : Form1.OlapGrid2


  3. Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  4. 계열
    • 판매계획금액 차트 유형 : 직선형


  5. 범례
    • 위치 : Top, Center

...

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

         

Step 4. 지역별 판매액 vs 영업이익률

이중 축으로 구성된 차트를 설정합니다.

  1. Chart 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : Chart3
    • DataSource : 이중 축 차트
    • AutoRefresh 활성화


  3. Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  4. 계열
    • 영업이익률 차트 유형 : 직선형
    • 영입이익률 축 : Y2


  5. 축
    • Y2 표시 활성화

...

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

         

Step 5. 제품군별 판매현황

도넛 차트와 막대형 차트를 생성합니다.


5.1 도넛 차트

  1. Pie-Chart 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : Chart4
    • DataSource : 도넛&BAR 차트
    • AutoRefresh 활성화
  3. 차트 유형 변경
    • 차트 유형 : 도넛형


  4. Pie-Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  5. 기본
    • 데이터 레이블 : Value


  6. 계열
    • 레이블 필드 : 제품중분류명
    • 값 필드 : PER
    • 서식 : {0:N1}%


  7. 범례
    • 표시 비활성화


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


5.2 막대 차트

  1. Chart 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : Chart5
    • DataSource : 도넛&BAR 차트
    • AutoRefresh 활성화

  3. 차트 유형 변경
    • 차트 유형 : 묶은 가로 막대형


  4. Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.


  5. 기본
    • 데이터 레이블 : Value


  6. 계열
    • PER, PER2 계열 표시 비활성화


  7. 범례
    • 표시 비활성화


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

Step 6. Process Bot 설정하기

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


6.1 조회 버튼 생성

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

  1. Button 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : BTN_REFRESH
    • Text : 조회


  3. Process Bot 실행
    아이콘(Image Modified)을 클릭하여 프로세스 봇 창을 실행합니다실행하고, 버튼 컨트롤을 더블 클릭합니다.
    Image RemovedImage Added

  4. Refresh 동작 추가
    Image Removed
    Refresh 동작 설정
    Image RemovedActivities 탭을 클릭 후 Refresh 모듈을 더블 클릭합니다.
    Image Added

  5. 모듈 파라미터 설정 아이콘(Image Added)을 클릭하여, Refresh 동작을 설정합니다.
    Image Added

6.2 도넛 차트 색상 설정

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

  1. Process Bot 실행
     아이콘()을 클릭하여 프로세스 봇 창을 실행합니다실행하고, Report 를 더블 클릭합니다.
    모듈 동작 추가
    Image Removed
    모듈 설정
    Image Removed
    Image Added

  2. Activities > Modules > 컨트롤별 > Chart > '차트 색상 팔렛트 지정 하기' 모듈을 선택하고 값을 설정합니다.
    • 차트 선택
    • 색상 값 입력

    Image Added

    참고사항
    iconfalse
    titleDiscription

    보고서에서 사용한 색상 코드

    #de555d,#e98389,#ef9b9f,#f7bdbf,#ffdfe0,#dac9cf,#b5b2bd,#909bac,#788595,#5d6f7d


  3. 차트 색상 프로세스 봇 설정 완료
    Image RemovedReport > OnDocumentLoadComplete 이벤트에 '차트 색상 팔렛트 지정하기' 모듈을 연결합니다.
    Image Added

6.3 도넛 차트 레이블 위치 변경 

Module을 활용하여 도넛 차트의 레이블에 레이블 위치를 설정합니다.

  1. 모듈 동작을  추가 합니다.
    Image Removed
    [모듈목록] Activities 탭에서 '레이블' 로 검색하여 ['PieChart 레이블 위치 변경] 모듈을 추가합니다. 레이블 위치를 변경할 차트를 선택합니다.
    Image Removed
    레이블이 표현될 [-15] 각도를 입력합니다.' 모듈을 더블 클릭합니다.
    Image Added

  2. 모듈 파라미터 설정 아이콘(Image Added)을 클릭하여, 'PieChart 레이블 위치 변경' 동작을 설정합니다.
    • 차트 선택 : Chart4
    • 레이블이 표현될 각도 입력 : -15
    • 차트 내부로 표현되고자 할 경우 - 를 포함하여 숫자를 입력합니다. 
                 - 값이 증가할 수록 레이블이 차트 내부쪽으로 표현되며 양수 값이 증가할 수록 레이블은 차트 외부쪽으로 표현됩니다. 

         Image Removed

  1. Image Added

  2. Report > OnDocumentLoadComplete 이벤트에 'PieChart 레이블 위치 변경' 모듈을 연결합니다.
    Image Added

      64. 아래와 같이 설정되었는지 확인 후 프로세스 봇 창을 봇을 저장하고 종료합니다. 

        Image RemovedImage Added

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

...