X-SCADA AI에서는 외부 라이브러리 활용 및 스크립트를 통한 사용자 정의 커스터마이징이 가능합니다.

이번에는 아파치(Apache)의 Echart를 활용한 차트 디자인 응용 방법을 소개합니다.

Apache ECharts 공식 웹사이트: https://echarts.apache.org/

- Examples 페이지에서 다양한 차트 디자인 확인 가능

1. X-SCADA AI Designer에서 혼합형 차트(MixedChart), 이미지(Image) 등을 이용하여 화면을 제작한다.

2. 혼합형 차트(MixedChart)에 데이터 표현을 위해 데이터소스(Data Sources) 탭에서 DB를 추가한다.

3. SELECT SQL 추가(Add SELECT SQL)를 한 뒤 아래와 같이 SQL을 작성한다.

· 아래는 하나의 예시이며, 사용하고자 하는 차트 형식에 맞게 가져와야 문제없이 표현 가능

· 이번 시간에 활용할 샘플은 Distribution of Electricity(클릭 시 이동)를 사용할 예정

4. 사용하고자 하는 샘플을 X-SCADA AI 객체에 적용하기 위해 자바스크립트 파일(.js)을 생성 및 코드 작성한다.

· 첨부한 파일 중 Chart All Options.js 파일은 X-SCADA AI에서 사용가능한 대부분의 옵션을 설명

· 만약 실제로 이번 게시글의 예제와 똑같은 차트를 그리고 싶다면 첨부한 EChart,js을 다운로드하여 따라하면서 적용 (EChart,js 파일은 일부 옵션만 적용)

5. 상단 파일(File) > 웹 서비스용 내보내기(Export for Http Service)를 클릭한다.

· Echart는 웹 기반 엔진을 사용하기 때문에 웹에서 볼 수 있도록 웹 서버 설정 진행

6. 웹 내보내기 옵션에서 외부 자바스크립트(External JavaScript)에 미리 생성해둔 EChart.js 파일을 설정한 뒤 [확인(OK)]을 눌러 웹 내보내기를 마무리한다.

7. 도구모음에서 실행환경 설정(Runtime Setup)을 클릭한다.

8. 실행환경 설정(Runtime Settings) > 웹 서비스(Http Service) > 홈 디렉토리(Home Directory)에 방금 내보내기한 웹 파일을 담고 있는 폴더를 설정한다. 

9. 프로젝트 저장 후 X-SCADA AI Viewer로 실행한 뒤, 서비스(Service) 메뉴에서 웹 서버를 시작한다.

10. 웹 브라우저(Chrome, Edge 등)의 주소창에 localhost 혹은 PC IP 주소를 입력하여 X-SCADA AI 웹서버에 접속하여 결과를 확인한다.