이번 글에서는 고객사에서 검토를 요청하셨던 커스텀 차트의 기술 검토 내용을 공유하고자 합니다.
고객사의 요구사항은, 특정 기기의 일일 기기 가동률 표시를 위하여 간트 차트 모양과 유사하게, 일일 24시간, 1시간 단위로 구분된 분별 가동률 차트를 세로형태로 확인하고 싶다는 것이었습니다.
Thingworx에서 Schedule Chart 위젯의 커스텀 한계로 요청받은 형태의 차트 구현이 불가능해서 자사의 Innofactory Highchart Extension을 사용하여 Extension에 스크립트를 추가해 추가 기능을 통해 특별한 형태의 차트 구현을 기술검토 하였습니다.
Thingworx에서 Highchart를 사용한 커스텀 Gantt chart 기술 검토 과정 #
준비물 #
Thingworx에서 Highchart의 간트차트를 이용하기 위해서는 몇가지 전제와 사전 준비가 필요합니다.
- Innofactory highchart Extension
- Thingworx에서 Innofactory Highchart Extension을 사용해야 합니다.
- Highchart Extension을 수정하여 Highchart의 간트 차트 모듈을 추가할 수 있어야 합니다. (highcharts-gantt.js 를 추가해야합니다.)
Thingworx의 Schedule chart로 만든 커스텀 차트 예시 #
Thingworx에서는 Schedule Chart 위젯을 통해 간트 차트와 유사한 UI를 구현할 수 있습니다.
[그림] Thingworx의 스케줄 차트 예시
하지만 Schedule chart 위젯은 어디까지나 간단한 형태의 간트차트를 유사하게 표현할 뿐이지 디테일한 커스텀이 어려운 경우가 있습니다.
이 이유로 Innofactory Highchart Extension을 사용하여 Extension에 스크립트를 추가하여 고객사에서 요청받은 형태의 차트를 커스텀 해보겠습니다.
Highchart로 만든 세로형 간트 차트 데모 #
Highchart 를 사용해 세로형 간트 차트 데모는 다음과 같습니다.
[출처] https://www.highcharts.com/demo/gantt/inverted (Highchart Demo)
위와 같이 기간을 설정하고 해당 기간의 진행률과 라벨 표시, 그룹 구분까지 가능합니다.
하지만 일반적인 간트 차트는 월/주차 별 진행도를 표시하지 고객사의 요구사항과 같이 일일 시간별로 구분하진 않기 때문에 해당 형태의 차트 구현을 위해서는 세로형 간트차트에 수정이 필요합니다.
Highchart로 만든 세로형 간트 차트 변형 예시 #
위의 세로형 간트 차트 데모를 수정해 고객사의 요청을 반영한 형태로 구현한 모습입니다.
위의 형태로 구현하게 되면 하이차트 간트차트 데이터 포멧이 길어져 데이터 가공이 복잡한 단점이 있으나, Thingworx 내의 기본 Schedule 차트의 기능으로는 구현이 불가능한 형태이기 때문에 위젯을 새롭게 개발하는 것 보다는 훌륭한 대안이 될 수 있을겁니다.