이전 글: 2022.04.18 - [Database/Oracle Database] - Oracle Application Express 개요 & 샘플 - 4.1. APEX 사용 샘플 #2 - 로컬 테이블을 이용한 Chart 생성
Dynamic Action을 이용한 복수 계열 Line Chart 생성
이번에는 Chart를 생성했던 페이지에 또하나의 Chart를 추가하는데, 국가별 인구 1,000당 의사 수, 간호사 수, 약사 수, 치과 의사 수를 동적으로 보여주는 Chart를 만들어보도록 하겠습니다.
먼저 Chart Region을 생성합니다. Chart 페이지(Page 3)의 Redering Tree에서 Physicians Chart를 선택합니다. 그리고 가운데 Layout Editor 하단의 Regions 탭에서 Chart를 선택합니다.
Chart Region을 마우스로 끌어다 기존 Physicians Chart 아래쪽에 가져다 놓습니다. 이때 노란색 박스에다 놓아야 합니다.
Chart Region이 추가되었습니다. Propery Editor의 Identification 섹션에서 Title을 변경합니다. 여기에서는 “Health Persionnel Chart”라고 했습니다.
Chart에 그릴 데이터를 정의합니다. Rendering Tree의 Health Personnel Chart > Series아래 New를 클릭합니다. 그리고 Property Editor에서 아래와 같이 변경합니다.
· Identification 섹션 – Name: Physicians (per 1000 population)
· Source 섹션 – Type: SQL Query
· Source 섹션 – SQL Query: 아래 쿼리를 붙여 넣습니다. 현재는 Afganistan의 연도별 인구 1,000명당 의사 수입니다.
| select year , value from pdbadmin.health_personnel where region_code = 'AFG' and series = 'Health personnel: Physicians (per 1000 population)' order by year; |
· Column Mapping 섹션 – Label : YEAR
· Column Mapping 섹션 – Value : VALUE
Rendering Tree에서 Axes 아래 y를 클릭한 다음, 왼쪽 Property Editor에서 Value 섹션의 Decimal Places의 값을 0에서 1로 변경합니다.
그리고 이번 Chart는Line Type으로 합니다. Chart의 Type을 변경하기 위해서는 Rendering Tree에서 Chart “Health Personnel Chart”를 선택하고, 오른쪽 Property Editior의 Attributes 탭의 Chart 섹션에서 Type의 값을 현재 Bar에서 Line으로 변경합니다.
Save and Run Page 버튼을 클릭하여 방금 적용한 내용이 반영되었는지 확인합니다.
현재 Line Chart에서 보여주고가 하는 내용은 국가별 인구 1,000명당 의사 수뿐만 아니라, 간호사, 약사, 치과 의사 수 입니다. 이를 표현하기 위해서는 위에서 작업했던 의사 수 데이터 계열(Series) 작업을 간호사, 약사, 치과의사에 대해서도 동일하게 수행해도 됩니다만, Series 이름, SQL Query만 다를뿐 나머지는 동일하기 때문에, 조금 전 생성한 Series를 그대로 복제하겠습니다.
Rendering Tree에서 Health Personnel Chart > Series 아래 Physicians (per 1000 population)을 선택한 다음, 오른쪽 클릭을 해서 나타난 Duplcate을 클릭합니다. 전체 4개 Series 이기 때문에 세번의 복제를 수행합니다.
첫번째 복제 Series에 대해 Property Editor에서 아래와 같이 수정합니다.
· Identification 섹션 – Name: Pharmacists (per 1000 population)
· Source 섹션 – SQL Query: 아래 쿼리를 붙여 넣습니다. 현재는 Afganistan의 연도별 인구 1,000명당 치과 의사 수입니다.
| select year , value from pdbadmin.health_personnel where region_code = 'AFG' and series = 'Health personnel: Pharmacists (per 1000 population)' order by year; |
두번째 복제 Series에 대해 Property Editor에서 아래와 같이 수정합니다.
· Identification 섹션 – Name: Nurses and midwives personnel (per 1000 population)
· Source 섹션 – SQL Query: 아래 쿼리를 붙여 넣습니다. 현재는 Afganistan의 연도별 인구 1,000명당 간호사 수입니다.
| select year , value from pdbadmin.health_personnel where region_code = 'AFG' and series = 'Health personnel: Nurses and midwives personnel (per 1000 population)' order by year; |
세번째 복제 Series에 대해 Property Editor에서 아래와 같이 수정합니다.
· Identification 섹션 – Name: Dentists (per 1000 population)
· Source 섹션 – SQL Query: 아래 쿼리를 붙여 넣습니다. 현재는 Afganistan의 연도별 인구 1,000명당 치과의사 수입니다.
| select year , value from pdbadmin.health_personnel where region_code = 'AFG' and series = 'Health personnel: Dentists (per 1000 population)' order by year; |
Save and Run Page 버튼을 클릭하여 방금 적용한 내용이 반영되었는지 확인합니다.
현재는 Afanistan의 데이터만 오른쪽 Chart에서 보여주고 있습니다. 이를 국가별 선택 목록을 만들어서, 국가를 선택할 때마다 해당 국가의 그래프가 나오도록 수정해 보겠습니다.
먼저 Page Item을 추가합니다.
Item은 페이지 내 Region에 추가할 수 있는 항목으로 체크박스, 테스트 필드, 테스트 영역, 선택목록, 체크박스 등 여러가지가 있으며, 각각 고유한 속성을 지니고 있습니다.
Page Designer로 돌아가서 Rendering Tree에서 Health Personnel Chart를 선택합니다. 그리고 가운데 Layout Editor 하단의 Items 탭을 선택한 다음, Select List를 클릭합니다.
Select List Item을 마우스로 끌어다 기존 Health Personnel Chart Region Body에 가져다 놓습니다. 이때 노란색 박스에다 놓아야 합니다.
Property Editor에서 아래와 같이 수정합니다.
· Identification 섹션 – Name: P3_COUNTRY
· List of Values 섹션 – Type: SQL Query
· List of Values 섹션 – SQL Query: 아래 쿼리를 붙여 넣습니다.
| select distinct region_name d, region_code r from health_personnel order by 1; |
· List of Values 섹션 – Display Extra Value: No
· List of Values 섹션 – Null Display Value : Select Country -
Save and Run Page 버튼을 클릭하여 방금 적용한 내용이 반영되었는지 확인합니다.
이제 Select List의 값이 선택될 때 마다, 해당 값의 Chart로 Refresh 되도록 해야 합니다. 이를 위해서 사용되는 것이 Dynamic Action입니다.
Dynamic Action은 JavaScript 없이 복잡한 클라이언트 측 동작을 선언적으로 정의하는데 사용됩니다. Dynamic Action Create Wizard를 사용하여 정의된 조건 집합이 발생할 때 수행되는 작업을 지정할 수 있으며, 작업의 영향을 받는 요소와 영향을 받는 시기와 방법을 지정할 수도 있습니다.
이러한 Dynamic Action은 페이지에서 발생하는 이벤트를 기반으로 실행할 동적 작업을 정의할 수 있습니다. Oracle Application Express에는 브라우저 이벤트, 프레임워크 이벤트, 구성 요소 이벤트 및 사용자 정의 이벤트의 네 가지 이벤트 범주가 있습니다.
Page Designer로 돌아와서 Select List Item “P3_COUNTRY”를 선택한 다음, 오른쪽 클릭을 해서 나타나는 Create Dynamic Action을 클릭합니다.
생성된 Dynamic Action “New”를 선택하고 오른쪽 Property Editor에서 Idenfication 섹션의 Name을 변경합니다. 여기서는 Refresh Chart라고 했습니다.
Rendering Tree에서 Dynamic Actions 아래 True 팀에 있는 Show를 클릭합니다. Property Editor에서 아래와 같이 값을 변경합니다.
· Identification 섹션 – Action: Refresh
· Affected Elements 섹션 – Selection Type: Region 선택
· Affected Elements 섹션 – Region: Health Personnel Chart 선택
현재 국가별 인구 1,000당 의사 수, 간호사 수, 약사 수, 치과의사 수를 나타내는 계열의 SQL Query에는 국가코드가 모두 Afganistan(ISO코드: AFG)으로 하드코딩되어 있습니다. 이를 Select List에서 선택한 값을 받아 동적으로 변경되기 위해서는 먼저 해당 Chart가 Select List Item에서 정의된 값을 받는다는 것을 정의하고, SQL Query에서 국가 ISO 코드로 조건을 받는 부분을 Select List Item 변수값으로 바꾸는 것이 필요합니다.
먼저 Property Editor에서 Health Personnel Chart를 선택하고, Property Editor의 Source 섹션의 Page Items to Summit 값을 아래와 같이 P3_COUNTRY로 선택합니다.
그리고 Health Personnel Chart > Series 아래 네개의 계열 모두에 대해 SQL 쿼리의 국가 ISO 코드를 받은 부분을 Select List 값으로 :P3_COUNTRY와 같이 변수 처리합니다.
Save and Run Page 버튼을 클릭하여 방금 적용한 내용이 반영되었는지 확인합니다. Select List에서 국가를 선택하면 해당 국가의 의료 인력 현황이 나타나는 것을 확인할 수 있습니다.
가독성을 높이기 몇가지 위한 마무리 작업을 진행하겠습니다.
Chart 상단의 있는 Region 이름인 “Health Personnel Chart”를 삭제합니다. Chart가 있는 런타임 환경의 하단에서 Quick Edit을 클릭한 후, 나오는 오른쪽 상단의 렌치를 클릭합니다. Live Template Options 대화창에서 Header의 값을 Visible - Default에서 Hidden but accessible로 변경하고, Save를 클릭합니다.
Health Personnel Chart의 각 계열명을 표기하기 위해 Page Designer로 돌아가서 Health Personnel Chart를 선택하고, Property Editor의 Attributes 탭에서 Legend 섹션의 Show 값을 Yes로 변경합니다. 값 변경 후, Save and Run Page 버튼을 클릭하여 방금 적용한 내용이 반영되었는지 확인합니다.
<END>
다음 글:
