AUD PLATFORM
페이지 트리
메타 데이터의 끝으로 건너뛰기
메타 데이터의 시작으로 이동

이 페이지의 이전 버전을 보고 있습니다. 현재 버전 보기.

현재와 비교 페이지 이력 보기

« 이전 버전 9 다음 »

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


경영 현황 Template

실습 Template 다운로드

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

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

      템플릿 위치 : [TBD] > [Templates] > [3.Sample] > [Dashboard] > "경영 현황"



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

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

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



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

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


1.1 컨트롤 불러오기

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

1.2 컨트롤별 속성 설정

  1. 우측 컨트롤 속성 편집 영역에서 다음과 같이 Calendar의 속성을 지정해줍니다.
    • Name : VS_YM_F
    • Name2 : VS_TM_T
    • InitValue : DATE(0,-12,0);DATE(0,0,0)





  2. 우측의 컨트롤 속성 편집 영역에서 다음이 ComboBox의 속성을 설정합니다.
    • Name : VS_PRODUCT
    • DataSource : CB_상품대분류
       더보기 > [공통 데이터 소스] > CB_상품대분류
    • UseAllItems 활성화
    • AutoRefresh 활성화



  3. 우측의 컨트롤 속성 편집 영역에서 다음이 Label의 속성을 설정합니다.

    NameText
    LB_조회년월조회년월
    LB_제품군제품군

Step 2. 제품별 판매수량

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


2.1 Olap-Grid 설정

  1. 보고서 하단의 DATA Form을 클릭하여 이동합니다.


  2. Olap-Grid 컨트롤 생성


  3. 컨트롤 속성 변경
    • Name : OlapGrid1
    • AutoRefresh 활성화


  4. Olap-Grid 우 클릭하여 데이터소스 > i-META 메뉴를 실행하여 "매출분석" META 파일의 데이터를 연결합니다.

    META 파일 경로 : [TBD] > [Templates] > [3.Sample] > [OLAP] > "매출분석"
    • Column : 년월
    • Row : 상품대분류
    • Data : 매출수량

  5. 조회 조건 영역에 년월, 상품대분류 필드를 배치합니다.
    • 년월 : BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력
    • 상품대분류 : @:VS_PRODUCT 변수 입력

  6. 설정 탭으로 이동 
    • 자동 선택 영역 활성화
    • 범위 : 오른쪽 12, 아래쪽 4


2.2 Chart 설정

  1. 보고서 하단의 MAIN Form을 클릭하여 이동합니다.

  2. MAIN Form으로 돌아와서 Chart 컨트롤 생성


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


  4. 차트 유형 변경
    • 차트 유형 : 곡선형


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


  6. 범례
    • 위치 : Top, Right
    • 방향 : Horizontal


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

         

Step 3. 월별 총 매출이익

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


3.1 Olap-Grid 설정

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


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



  3. Olap-Grid 우 클릭하여 데이터소스 > i-META 메뉴를 실행하여 "매출분석" META 파일의 데이터를 연결합니다.
    • Column : 년월
    • Data : 매출금액, 매출원가

  4. 조회 조건 영역에 년월, 상품대분류 필드를 배치합니다.
    • 년월 : BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력
    • 상품대분류 : @:VS_PRODUCT 변수 입력

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


  6. 필드
    필드 메뉴에서  신규 아이콘을 클릭하여 총매출이익 계산 필드를 생성합니다.
    • 캡션 : 총매출이익
    • 서식 : {0:N0}
    • 수식 : [매출금액] - [매출원가]

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


3.2 Chart 설정

  1. MAIN Form으로 돌아와서 Chart 컨트롤 생성


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


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


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


  5. 범례
    • 위치 : Top, Right


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

         

Step 4. TOP5 지역 매출

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


4.1 Olap-Grid 설정

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


  2. 컨트롤 속성 변경
    • Name : OlapGrid3
    • AutoRefresh 활성화
  3. Olap-Grid 우 클릭하여 데이터소스 > i-META 메뉴를 실행하여 "매출분석" META 파일의 데이터를 연결합니다.
    • Row : 매장지역
    • Data : 매출금액

  4. 조회 조건 영역에 년월 필드를 배치합니다.
    • 년월 : BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력

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

  6. 필드
    필드 메뉴에서 매장지역 필드를 Row에서 Column으로 이동합니다.

  7. 설정
    • 자동 선택 영역 활성화
    • 범위 : 오른쪽 9


  8. MAIN Form으로 돌아와서 Chart 컨트롤 생성

  9. 컨트롤 속성 변경
    • Name : Chart3
    • Olap-Grid : DATA.OlapGrid3


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


  11. 기본
    • 차트 유형 : 곡선 영역형

  12. 계열 > 스타일
    • 심볼 유형 : Circle


  13. 계열 > 기타
    • 단위 : 1000000(백 만)

  14. 범례
    • 위치 : Top, Right


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

         

Step 5. 제품군별 판매현황

도넛 차트를 생성합니다.


  1. Pie-Chart 컨트롤 생성


  2. 컨트롤 속성 변경
    • Name : PieChart
    • AutoRefresh 활성화
  3. PieChart를 우 클릭하여 데이터소스 > i-META 메뉴를 실행하여 "매출분석" META 파일의 데이터를 연결합니다.
    • 조회항목 : 상품중분류, 매출금액
    • 조회조건 : 년월, 상품대분류

  4. 조회 조건 영역에 배치한 필드에 변수명을 입력
    • 년월 : BETWEEN 연산자로 변경하고 :VS_FROM, :VS_TO 변수 입력
    • 상품대분류 : @:VS_PRODUCT 변수 입력

  5. 차트 유형 변경
    • 차트 유형 : 도넛형


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


  7. 계열
    • 레이블 필드 : 상품중분류
    • 값 필드 : 매출금
    • 서식 : {0:N0}

  8. 범례
    • 위치 : Mid, Right
    • 방향 : Vertical


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


Step 6. Process Bot 설정하기

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


6.1 조회 버튼 생성

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

  1. Button 컨트롤 생성


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


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


  4. Activities 탭을 클릭 후 Refresh 모듈을 더블 클릭합니다.


  5. 모듈 파라미터 설정 아이콘()을 클릭하여, Refresh 동작을 설정합니다.
    Refresh 대상 : PieChart, OlapGrid1, OlapGrid2, OlapGrid3


6.2 차트 색상 설정

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

  1. Process Bot 아이콘()을 클릭하여 프로세스 봇 창을 실행하고, Report 를 더블 클릭합니다.


  2. Activities > Modules > 컨트롤별 > Chart > [Chart] 차트 색상 팔레트 지정 하기 모듈을 선택하고 값을 설정합니다.
    • 차트 선택 : PieChart, Chart1, Chart2, Chart3
    • 색상 값 입력



    Discription

    사용한 색상 코드

    #8FB8F0, #2C6DC9, #2C3765, #ABC7EE, #8F96A8, #C6CAD5, #C4D9F5, #EEF1F5

  3. Report > OnDocumentLoadComplete 이벤트에 '[Chart] 차트 색상 팔레트 지정 하기' 모듈을 연결합니다.


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

      

    


  • 레이블 없음