Point Chart
Point chart 위젯은 Line chart와 비슷하지만, 텔레메트리 데이터 점을 잇지 않고 하나씩 점으로 표시합니다. 불연속 측정값, 흩어진 이벤트, 샘플링 데이터를 시각화하는 데 알맞습니다(예: 기록된 값 하나하나가 중요한 센서 측정값, 데이터 샘플링, 이상 감지).
주요 기능
섹션 제목: “주요 기능”- 데이터 기록마다 타임스탬프와 값에 따라 놓인 개별 점으로 나타납니다.
- 실시간 모드와 기록 모드에서 시간 창과 데이터 집계(선택 사항)를 설정할 수 있습니다.
- 비교 오버레이: 이전 기간(어제, 지난주 등)의 같은 시리즈를 현재 데이터 옆에 그립니다.
- 임계값을 라벨과 사용자 지정 스타일이 있는 가로 기준선으로 설정할 수 있습니다.
- 시리즈별 통계(최소, 최대, 평균, 합계, 최신)를 보여 주는 범례.
- 시리즈별로 점 스타일(모양, 크기, 라벨, 채우기 색상)을 정할 수 있습니다.
- 대시보드 시간 창을 바꾸지 않고 좁은 시간 범위를 살펴보는 데이터 줌.
위젯 추가
섹션 제목: “위젯 추가”- 대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
- 위젯 번들 선택 대화상자에서 Charts를 찾아 클릭합니다.
- Point chart 위젯을 선택합니다.
- 데이터 소스, 시리즈, 모양을 설정한 다음 추가를 클릭합니다.
이 절의 설정은 모두 기본 모드 기준입니다. 필수 항목만 다루는 빠른 설정입니다. 사용자 지정 툴팁 함수나 고급 축 서식 같은 세부 설정은 고급 탭으로 바꿉니다.
기본 탭은 설정을 타임윈도우, 데이터 소스, 시리즈, Y축, 임계값, 모양, 차트, X축, 범례, 툴팁, 애니메이션, 카드 모양으로 나눕니다.
시간 창
섹션 제목: “시간 창”표시할 시간 구간을 정합니다(예: 과거 12시간, Current day). 보이는 점의 수를 줄이려면 데이터 집계를 켜 구간별로 요약합니다(예: 시간별 평균). 자세한 내용은 시간 창 가이드를 참고하세요.
데이터 소스
섹션 제목: “데이터 소스”텔레메트리 데이터의 소스를 선택합니다:
- 장치 — 특정 HMI 장치. 설정한 시간 범위 동안 기록된 텔레메트리 값을 하나씩 점으로 보여 줍니다.
- 개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 여러 HMI 장치의 데이터 점을 한 차트에서 비교할 때 씁니다.
시리즈
섹션 제목: “시리즈”위젯은 표시 모드 두 가지를 지원합니다: 시리즈와 비교.
시리즈 모드
섹션 제목: “시리즈 모드”데이터 키마다 시간 축을 따라 놓인 개별 점들로 그립니다. 점 하나는 특정 타임스탬프의 텔레메트리 값 하나를 나타냅니다. 표시할 텔레메트리 값마다 키를 추가합니다(예: temperature, humidity).
시리즈 행의 설정 아이콘을 클릭하면 일반과 고급 탭이 있는 데이터 키 구성 대화상자가 열립니다.
일반 탭:
| 설정 | 설명 |
|---|---|
| 키 | 텔레메트리나 속성 키 이름. |
| 라벨 | 이 시리즈의 범례 라벨. |
| 단위 | 단위 접미사(예: °C, %). |
| 소수점 | 표시 값의 소수 자릿수. |
| 색상 | 점 색상. |
| 데이터 후처리 기능 사용 | 표시하기 전에 원시 값에 적용하는 JavaScript 변환(선택 사항). 시그니처: f(value, latestData). |
고급 탭 — 범례:
| 설정 | 설명 |
|---|---|
| 범례에 표시 | 이 시리즈를 차트 범례에 넣습니다. |
| 기본 숨김 | 시리즈를 그리지만 사용자가 범례에서 켜기 전까지 숨겨 둡니다. |
고급 탭 — Y축: 이 시리즈를 그릴 Y축을 선택합니다.
고급 탭 — 점 설정:
| 설정 | 설명 |
|---|---|
| 점 표시 | 데이터 점마다 마커를 그립니다. |
| 점 라벨 | 점 위나 아래에 값을 라벨로 표시합니다. 라벨 위치와 글꼴을 설정합니다. |
| 점 라벨 배경 | 점 라벨 뒤에 배경을 표시합니다. |
| 점 모양 | 마커 모양: 빈 원, 사각형, 다이아몬드 등. |
| 점 크기 | 마커 지름(픽셀). |
고급 탭 — 툴팁 값 서식 함수: 이 시리즈의 호버 툴팁에 보이는 값의 서식을 정하는 JavaScript 함수 f(value, latestData)(선택 사항).
고급 탭 — 비교 설정: 비교용 과거 데이터 표시를 켜면 이 시리즈 옆에 이전 기간의 비교 점을 그립니다. 비교 키 라벨(자동 또는 사용자 지정)과 비교 데이터 색상을 설정합니다.
비교 모드
섹션 제목: “비교 모드”비교 모드에서는 이전 기간의 같은 데이터 키를 현재 데이터 위에 겹쳐 그립니다(예: 오늘과 어제, 이번 주와 지난주). 기간마다 별도의 점 묶음으로 그리므로 구간 사이의 변화나 이상을 쉽게 찾을 수 있습니다.
이 모드를 켜려면 시리즈 영역의 비교 탭으로 바꿉니다. 비교 항목마다 구간 드롭다운, X축 버튼, 데이터 키 목록(표시, 키, 라벨, 색상)이 있습니다.
비교 구간 옵션:
| 옵션 | 설명 |
|---|---|
| 이전 구간(기본) | 시간 창을 구간 길이 하나만큼 뒤로 옮깁니다. |
| 1일 전 | 24시간 전의 같은 기간과 비교합니다. |
| 1주 전 | 7일 전의 같은 기간과 비교합니다. |
| 1개월 전 | 한 달 전의 같은 기간과 비교합니다. |
| 1년 전 | 1년 전의 같은 기간과 비교합니다. |
| 사용자 지정 구간 | 사용자 지정 오프셋을 밀리초로 입력합니다. |
비교 X축 설정 — X축 버튼을 클릭해 비교 시간 축의 표시 방식을 설정합니다:
| 설정 | 설명 |
|---|---|
| 표시 | 차트에 비교 X축을 표시합니다. |
| 라벨 | 비교 축의 글 라벨. |
| 위치 | 위 또는 아래. |
| 눈금 라벨 | 눈금에 날짜/시간 라벨을 표시합니다. 글꼴과 색상을 설정합니다. |
| 눈금 표시 | 축에 눈금 표시를 그립니다. |
| 선 표시 | 축 기준선을 그립니다. |
| 분할선 표시 | 눈금마다 세로 격자선을 그립니다. |
Y축을 하나 이상 설정해 세로 스케일과 라벨을 정합니다. 시리즈 설정의 Y축 필드로 시리즈마다 다른 축을 지정할 수 있습니다. 새 축을 추가하려면 Y축 추가를 클릭합니다.
축 행마다 다음 열이 있습니다:
| 열 | 설명 |
|---|---|
| Id | 시리즈를 이 축에 지정할 때 쓰는 고유 식별자. |
| 표시 | 차트에서 축을 표시하거나 숨깁니다. |
| 라벨 | 축 옆에 표시되는 글 라벨. |
| 위치 | 왼쪽 또는 오른쪽. |
| Min / Max | 고정 스케일 경계. 비워 두면 자동으로 조정합니다. |
| 단위 | 축 눈금 라벨의 단위 접미사. |
| 소수점 | 눈금 라벨 값의 소수 자릿수. |
축 행의 설정 아이콘을 클릭하면 Y축 설정 대화상자가 열립니다:
| 설정 | 설명 |
|---|---|
| 라벨 | 글꼴과 색상을 설정할 수 있는 글 라벨. |
| 눈금 라벨 | 눈금마다 값 라벨을 표시합니다. 글꼴과 색상을 설정합니다. |
| 눈금 표시 | 축 선에 눈금 표시를 그립니다. |
| 선 표시 | 축 기준선을 그립니다. |
| 분할선 표시 | 눈금마다 차트를 가로지르는 가로 격자선을 그립니다. |
| 눈금 간격 | 눈금 사이 간격. 자동이면 데이터 범위에서 정합니다. |
| 분할 수 | 권장 눈금 구간 수. 자동이면 차트가 정합니다. |
Scale limits — 축 스케일의 최소·최대 경계를 직접 정합니다. 경계마다 Source가 있습니다:
| 소스 | 설명 |
|---|---|
| 상수 | 직접 입력한 고정 숫자 값. |
| 키 | 현재 엔티티의 텔레메트리나 속성 키에서 가져온 값. |
| 엔터티 | 지정한 엔티티의 속성이나 텔레메트리 키에서 가져온 값. |
임계값
섹션 제목: “임계값”안전, 경고, 심각 수준을 표시하는 가로 기준선을 추가합니다. 행을 추가하려면 임계값 추가를 클릭합니다.
| 열 | 설명 |
|---|---|
| 소스 | 상수 — 고정 숫자 값. 엔터티 — 엔티티 속성이나 텔레메트리 키에서 가져온 값. |
| 키 / 값 | 숫자 값(상수) 또는 속성/텔레메트리 키 이름(엔터티). |
| Y축 | 임계값을 그릴 Y축. |
| 색상 | 임계값 선 색상. |
| 단위 | 임계값 라벨에 표시되는 단위 접미사. |
| 소수점 | 임계값 라벨 값의 소수 자릿수. |
임계값 행의 설정 아이콘을 클릭하면 임계값 설정 대화상자가 열립니다:
| 설정 | 설명 |
|---|---|
| 라벨 | 임계값 선에 글 라벨을 표시합니다. 위치를 정합니다: 시작, 중간, 끝, 내부 시작, 내부 시작 상단, 내부 시작 하단. 글꼴과 색상을 설정합니다. |
| 라벨 배경 | 라벨 글 뒤에 채운 배경을 표시합니다. |
| 선 색상 | 임계값 선의 색상. |
| 선 유형 | 대시 스타일: 실선, 점선, 도트. |
| 선 두께 | 선 두께(픽셀). |
| 시작 기호 | 선 왼쪽 끝의 마커(예: 없음, 화살표). 기호 크기를 정합니다. |
| 끝 기호 | 선 오른쪽 끝의 마커(예: 없음, 화살표). 기호 크기를 정합니다. |
위젯 헤더에 표시되는 차트 제목을 설정합니다.
| 설정 | 설명 |
|---|---|
| 제목 | 위젯 헤더에 표시되는 글. 글꼴, 크기, 굵기, 색상을 설정합니다. |
| 카드 아이콘 | 제목 옆에 표시하는 아이콘(선택 사항). |
상호작용 동작과 차트 영역 레이아웃을 설정합니다.
| 설정 | 설명 |
|---|---|
| 데이터 줌 | 대시보드 시간 창을 바꾸지 않고 좁은 시간 범위를 살펴보도록 가로 줌을 켭니다. |
| 그리드 | 차트 영역 안쪽 여백을 조정합니다. |
| 스택 모드 | 여러 시리즈를 같은 축에 쌓습니다. 항목별 기여 합계를 보여 줄 때 유용합니다. |
가로 시간 축을 설정합니다. 축을 아예 숨기려면 표시 스위치를 끕니다.
| 설정 | 설명 |
|---|---|
| 라벨 | 축을 따라 표시되는 글 라벨. 글꼴과 색상을 설정합니다. |
| 위치 | 아래 또는 위. |
| 눈금 라벨 | 눈금마다 날짜/시간 라벨을 표시합니다. 날짜 형식, 글꼴, 색상을 설정합니다. |
| 눈금 표시 | 축에 눈금 표시를 그립니다. 색상을 설정합니다. |
| 선 표시 | 축 기준선을 그립니다. 색상을 설정합니다. |
| 분할선 표시 | 눈금마다 차트를 가로지르는 세로 격자선을 그립니다. |
주 스위치로 범례 전체를 표시하거나 숨깁니다.
| 설정 | 설명 |
|---|---|
| 범례 위치 | 범례 배치: 상단, 하단, 왼쪽, 오른쪽. |
| Show 값s | 시리즈별로 표시할 통계: 최소, 최대, 평균, 합계, 최신. 여러 값을 함께 켤 수 있습니다. |
| 라벨 | 시리즈 이름 라벨의 글꼴과 색상. |
| 값 | 통계 값의 글꼴과 색상. |
| Column 제목 | 열 머리글 행의 글꼴과 색상(Show 값s를 켜면 보임). |
| 범례에 데이터키 정렬 | 시리즈 항목을 알파벳순으로 정렬합니다. |
주 스위치로 툴팁 전체를 표시하거나 숨깁니다.
| 설정 | 설명 |
|---|---|
| 트리거 | 포인트 — 데이터 점에 마우스를 올립니다. 축 — 차트 어디에나 마우스를 올리면 그 타임스탬프의 모든 시리즈 값을 보여 줍니다. |
| 날짜 | 타임스탬프를 표시합니다. 날짜 형식을 고르고 글꼴과 색상을 설정합니다. |
| 날짜/시간 구간 표시 | 툴팁 머리글에 시간 구간 범위를 표시합니다. |
| 0 값 숨기기 | 값이 0인 시리즈 항목을 툴팁에서 뺍니다. |
| 스택 모드에서 총합 표시 | 스택 모드를 켰을 때 모든 시리즈의 합계를 보여 줍니다. |
| 라벨 | 툴팁의 시리즈 이름 라벨 글꼴과 색상. |
| 값 | 툴팁의 값 글자 글꼴과 색상. |
| 배경색 | 툴팁 배경 채우기 색상. |
| 배경 블러 | 툴팁 배경에 적용하는 블러 반경(px). |
애니메이션
섹션 제목: “애니메이션”주 스위치로 차트 애니메이션을 켜거나 끕니다. 켜면 다음을 설정합니다:
| 설정 | 설명 |
|---|---|
| 애니메이션 임계값 | 데이터 점 수가 이 값(기본 2000)을 넘으면 성능을 위해 애니메이션을 끕니다. |
| 애니메이션 지속 시간 | 처음 불러올 때 애니메이션의 지속 시간(밀리초, 기본 500 ms). |
| 애니메이션 이징 | 처음 애니메이션의 이징 함수(예: cubicOut). |
| 애니메이션 지연 | 처음 애니메이션이 시작되기 전 지연(밀리초). |
| 업데이트 애니메이션 지속 시간 | 데이터 갱신이 들어올 때 애니메이션의 지속 시간(기본 300 ms). |
| 업데이트 애니메이션 이징 | 업데이트 애니메이션의 이징 함수. |
| 업데이트 애니메이션 지연 | 업데이트 애니메이션이 시작되기 전 지연(밀리초). |
카드 모양
섹션 제목: “카드 모양”| 설정 | 설명 |
|---|---|
| 배경 | 카드의 단색 또는 이미지 배경. |
| 카드 버튼 표시 | 툴바의 전체화면과 Data export 버튼을 켭니다. |
| 카드 모서리 반경 | 모서리 둥글기(픽셀). |
| 카드 패딩 | 내용과 카드 테두리 사이 간격. |
Point chart는 위젯 헤더 버튼 동작을 지원합니다. 위젯 헤더에 놓는 버튼으로, 클릭하면 설정한 동작을 실행합니다.
임계값이 있는 온도 측정값
섹션 제목: “임계값이 있는 온도 측정값”목표: Smart Device에 기록된 지난 12시간의 temperature 측정값을 모두 개별 점으로 표시하고, 높은 값이 눈에 띄도록 28 °C에 빨간 임계값 선을 긋습니다.
사전 준비: temperature(°C)를 텔레메트리 키로 보내는 Smart Device라는 HMI 장치.
1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Charts 번들을 선택한 다음 Point chart를 고릅니다.
2단계. 타임윈도우 설정. 기간을 실시간 — 과거 12시간으로 정합니다. 기록된 데이터 점을 모두 표시하도록 집합은 없음으로 둡니다.
3단계. 데이터 소스 설정. 데이터소스 유형을 장치로 정하고 Smart Device를 선택합니다.
4단계. 시리즈 추가. 시리즈 영역에 데이터 키 하나를 추가합니다:
| 키 | 라벨 | Y축 | 색상 | 단위 | 소수점 |
|---|---|---|---|---|---|
temperature | Temperature | default | #4256F1 | °C | 1 |
5단계. Y축 설정. 기본 축을 설정합니다:
| ID | 라벨 | 위치 | 단위 | 소수점 |
|---|---|---|---|---|
default | Temperature, °C | 왼쪽 | °C | 0 |
6단계. 임계값 추가. 임계값 추가를 클릭하고 다음과 같이 설정합니다:
| 소스 | 값 | Y축 | 색상 | 단위 | 소수점 |
|---|---|---|---|---|---|
| 상수 | 28 | default | #F44336 | °C | 0 |
임계값 설정 아이콘을 열고 라벨을 설정합니다: 위치 — Start, 색상 — #FFFFFF. 라벨 배경을 켜고 색을 #F44336으로 정합니다.
7단계. 모양과 범례 설정. 모양 영역에서 제목을 Temperature Point Chart로, 글꼴 크기를 18 px로, 굵기를 600으로 정합니다. 범례 영역에서 범례 위치를 상단으로 정하고 최소, 최대, 평균을 켭니다.
8단계. 툴팁 설정. 툴팁을 간결하게 하려면 날짜/시간 구간 표시를 끕니다.
9단계. 저장. 추가를 클릭하고 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.
결과: 차트가 온도 측정값을 하나씩 파란 점으로 보여 줍니다. 28 °C의 빨간 임계값 선 덕분에 높은 측정값을 한눈에 찾을 수 있습니다. 범례는 최소/최대/평균 통계를 보여 주고, 툴팁은 마우스를 올린 점의 정확한 값과 타임스탬프를 보여 줍니다.
문제 해결
섹션 제목: “문제 해결”위젯에 데이터가 표시되지 않음
| 원인 | 해결 방법 |
|---|---|
| 데이터 키 이름이 틀림 | 키 이름이 HMI 장치가 보내는 텔레메트리 키와 같은지 확인합니다. 키 이름은 대소문자를 구분합니다. |
| 데이터 소스나 엔티티 별칭이 틀림 | 올바른 HMI 장치나 개체 별명을 선택했는지 확인합니다. 개체 별명을 열어 별칭이 결과를 돌려주는지 확인합니다. |
| HMI 장치가 데이터를 보내지 않음 | 장치 → 최근 데이터를 열고 최근 값이 있는지 확인합니다. 비어 있으면 HMI 장치의 전송 설정과 액세스 토큰을 확인합니다. |
| 선택한 시간 창에 텔레메트리가 없음 | 시간 범위를 늘리거나 실시간 모드로 바꿔 데이터가 있는지 확인합니다. |
| 룰 체인 설정 오류 | 룰 체인에 HMI 장치 텔레메트리를 데이터베이스로 보내는 Save time series 노드가 있는지 확인합니다. |
| 가져온 뒤 데이터 소스를 바꾸지 않음 | 위젯을 가져온 뒤 데이터 소스가 사용자의 HMI 장치를 가리키도록 바꾸고, 데이터 키 이름을 HMI 장치의 실제 텔레메트리 키에 맞게 바꿉니다. |
보이는 점이 너무 많거나 너무 적음
| 원인 | 해결 방법 |
|---|---|
| 집계가 켜져 있음 | 개별 데이터 점을 기대했는데 요약만 보이면 시간 창 설정에서 집합을 없음으로 정합니다. |
| 시간 창이 너무 좁음 | 기대하는 데이터가 들어오도록 시간 범위를 늘립니다. |
| 브라우저 시간대가 맞지 않음 | 대시보드와 HMI 장치가 같은 시간대를 쓰는지 확인합니다. |
차트에 시리즈가 나타나지 않음
| 원인 | 해결 방법 |
|---|---|
| 데이터 키를 추가하지 않음 | 시리즈 영역을 열고 텔레메트리 키가 데이터 키 행으로 추가되어 있는지 확인합니다. |
| 시리즈가 기본 숨김임 | 데이터 키의 고급 설정을 열고 기본 숨김을 끕니다. |
| Y축 지정이 틀림 | 시리즈가 있는 Y축 ID에 지정되어 있는지 확인합니다. |