프레젠테이션 사용자 정의 > ThingWorx Apps 위젯 > Dygraph 위젯
Dygraph 위젯
Dygraph 위젯은 시간 계열 차트를 표시하는 데 유용합니다. ThingWorx Apps에서는 위젯이 다음과 같은 여러 위치에서 사용됩니다.
• 추세 및 문제 해결에서 추세 세부 정보 페이지의 차트의 경우(PTC.Factory.TrendTroubleshooting.TrendDetail)
• Controls Advisor에서 클라이언트 수 및 태그 수 차트의 경우(PTC.Factory.KEPServerEX.DetailPage)
• 생산 KPI에서 생산 기록 데이터 페이지의 상태 기록 및 KPI 추세 차트의 경우(PTC.Factory.ProductionHistoricalData, PTC.Factory.C_ProductionHistoricalData_[ReleaseVersion])
• Asset Advisor에서 성능 페이지의 이번 주 상태 차트의 경우(PTC.SCA.SCO.AssetMonitor.AssetDetail.PerformanceMonitorContainerMashup)
이러한 구현은 예로 참조할 수 있습니다.
Dygraph 위젯은 Dygraphs 차트 라이브러리에서 기능의 하위 세트를 구현하며, ThingWorx Apps에서 사용할 수 있도록 사용자 정의되었습니다. Dygraphs 설명서( http://dygraphs.com/)를 유용한 리소스로 활용할 수 있습니다. 이 도움말 항목에 설명된 기능만 Dygraph 위젯과 함께 사용할 수 있습니다.
Dygraph 위젯에 대한 유틸리티 서비스
PTC.SCA.SCO.DygraphUtils 사물에는 위젯의 JSONData 속성에 대한 데이터를 올바른 형식으로 생성하는 데 도움을 주는 서비스가 포함되어 있습니다. GenerateDygraphData 서비스는 Dygraph 위젯이 표시할 수 있는 형식으로 사물에 대한 가치 스트림 또는 데이터베이스로부터 속성의 지정된 목록에 대한 기록 데이터를 제공합니다. 유효한 집합의 입력이 제공된 경우, 이 서비스는 위젯에서 JSONData 속성에 바인딩할 수 있는 CSV 형식으로 데이터를 반환합니다. 개별 매쉬업에서 이 위젯에 대한 특정 데이터를 생성하기 위해 GenerateDygraphData 서비스를 사용하는 새 서비스를 생성할 수 있습니다.
또한 PTC.SCA.SCO.DygraphUtils 사물에도 PTC.Factory.ProductionHistoricalData 및 PTC.Factory.C_ProductionHistoricalData_[ReleaseVersion] 매쉬업의 위젯에서 사용되는 서비스가 포함됩니다.
• GenerateKPIPropertiesHistoryForDygraph - 생산 KPI의 장비 유형에 대한 생산 기록 데이터 페이지의 KPI 추세 차트에서 선택된 시간 범위에 대해 표시되는 KPI 속성 기록 정보를 검색합니다. 이 서비스는 특정 속성에 대한 기록 데이터를 데이터베이스에서 직접 가져오기 위해 GenerateDygraphData 서비스를 사용하는 예입니다.
• GenerateStatusHistoryForDygraph - 생산 KPI의 장비 유형에 대한 생산 기록 데이터 페이지의 상태 기록 차트에 표시되는 상태 기록 정보를 검색합니다. 또한 Asset Advisor의 성능 페이지에 표시된 정보를 검색합니다. 이 서비스는 선택된 시간 범위에 대한 상태 변경 정보 및 선택한 시간 범위 바로 앞에 있는 데이터 점을 검색합니다. 따라서 선택된 시간 범위 동안에 발생한 상태 변경뿐 아니라 선택된 시간 범위 전체에 해당하는 상태 정보가 표시됩니다.
관련 Dygraph 위젯 속성
이러한 속성은 위젯의 속성 탭에 있는 설정에서 찾을 수 있습니다.
속성
설명
annotationsDivName
주석 정보가 표시되는 HTML div 요소입니다. 이는 위젯의 외부에 표시되는 요소입니다. 매쉬업 내의 아무 곳에나 div를 배치하려면 HTML 요소를 작성하고 해당 요소 내에 div를 배치합니다. 예를 들어 사용자가 KPI 추세 차트에서 변경 이벤트 상자를 클릭하면 표시되는 주석입니다.
ConnectSeparatedPoints
확인란을 선택하면 차트에서 데이터 간의 간격이 연결됩니다.
CustomBars
확인란을 선택하면 각 CSV 셀이 "low;middle;high"로 구문 분석됩니다. 낮은 점과 높은 점 사이에 있는 각 점에 대해 오차 막대가 그려지며, 계열 자체는 가운데를 통과합니다. 이는 평균 값을 차트에 표시할 때 범위를 표시하는 방법으로 주로 사용됩니다. 이렇게 하면 적은 수의 점을 표시하면서도 점이 예상보다 높거나 낮은 위치를 계속 표시할 수 있습니다.
dateFormat, useDateFormat
X축 날짜에 형식을 지정할 수 있습니다. Moment.js Javascript 라이브러리의 다음 함수가 사용됩니다. moment(date).format(XXX)
DisplayTagName
확인란을 선택하면 차트 범례에 태그 또는 속성의 전체 이름이 값과 함께 표시됩니다. 태그 또는 속성 이름이 길 경우 데이터가 잘릴 수 있습니다. 확인란을 선택하면 이름 대신 태그 또는 속성 이름의 사각형과 같은 색의 대시가 나타납니다. 태그 또는 속성 이름에 대해 색이 지정된 사각형이 차트 오른쪽에 있는 정보 패널에 나타납니다.
DrawAxisX, DrawAxisY, DrawAxisY2
확인란을 선택하면 차트의 해당 축에 값과 함께 가로 축 선이 표시됩니다.
DrawGridX, DrawGridY, DrawGridY2
확인란을 선택하면 차트의 해당 축에 세로 격자선이 표시됩니다.
DrawPoints
확인란을 선택하면 마우스로 가리킬 때만이 아니라 영구히 모든 점이 차트에 표시됩니다.
DygraphSynchDefault
확인란을 선택하면 매쉬업이 로드될 때 Dygraphs 차트 라이브러리의 동기화 기능이 호출되며 페이지의 모든 차트가 동기화됩니다. 이 기능이 올바르게 작동하려면 매쉬업의 모든 차트에 대해 이 확인란을 선택해야 합니다. 기본값으로 이 확인란은 선택되어 있지 않습니다.
FillArea
확인란을 선택하면 선으로 정의된 영역이 색상으로 채워집니다. 이 속성은 사용자 정의 막대와 호환되지 않습니다.
HideY-AxisValues
확인란을 선택하면 Y축의 숫자가 숨겨지지만 축 선은 표시됩니다.
LegendPosition
차트에서 범례 위치를 결정합니다. 기본값은 On Mouse Over입니다.
showDecimal
확인란을 선택하면 Y축에 소수 값에 대한 레이블이 표시됩니다.
StackedGraph
확인란을 선택하면 그래프 선이 스택형이 됩니다.
Stepped
확인란을 선택하면 차트에서 선이 직선이 아니라 파선으로 표시됩니다.
useAnnotation
annotationsJSON 또는 annotationsDivName을 사용하려면 이 확인란을 선택합니다.
UsePercentageFormat
확인란을 선택하면 Y축 값이 백분율로 표시됩니다. 왼쪽 Y축에만 적용됩니다.
이러한 속성은 위젯의 속성 탭에 있는 바인딩에서 찾을 수 있습니다.
속성
설명
annotationsJSON
차트에 주석을 추가하기 위해 구문 분석된 JSON입니다.
ChartTitle, XLabel, YLabel, Y2Label
차트 및 각 축의 레이블입니다. 아무 것도 지정하지 않으면 레이블이 표시되지 않습니다. 레이블 텍스트의 경우 차트에 안쪽 여백이 자동으로 추가됩니다.
DataLabel<#>
지정하면 계열에 사용되는 레이블이 제공됩니다. 비어 있는 경우 JSONData에서 데이터 레이블을 제공할 수 있습니다. DataLabel<#>을 지정하면 해당 계열에 두 번째 Y축 기능을 사용할 수 없습니다.
DateWindowEnd 및 DateWindowStart
차트가 표시될 때 초기 X축 범위에 대한 시작 시간과 종료 시간입니다.
DisableVerticalZoom
확인란을 선택하면 차트의 세로 확대/축소가 비활성화됩니다.
EnableZoomSynchronizing
확인란을 선택하면 차트의 확대/축소를 다른 차트와 동기화할 수 있습니다.
HexColors
차트에 표시된 계열 데이터에 사용된 16진수 색 값의 쉼표로 구분된 목록입니다. 차트의 각 계열에 대해 값 하나가 있습니다. 예: #a2a2a2,#f2b927,#3ec556,#09aec6,#ed684a,#a2a2a2. 이 속성은 서비스에서 계열 색을 동적으로 설정하는 데 사용됩니다. HexColors에 대해 값이 지정되지 않으면 SeriesStyle<#> 속성 값이 사용됩니다.
HideSeries<#>InLegend
확인란을 선택하면 차트 범례에서 계열이 숨겨집니다.
isZoomed
차트가 현재 확대되었는지 여부를 추적할 수 있습니다. 이는 매쉬업 또는 서비스 측면에서 다른 확대/축소 사용 사례를 처리하는 데 유용합니다(이미 확대/축소된 경우 확대/축소, 확대/축소 시 데이터 업데이트 및 확대/축소 유지).
JSONData
차트에 사용되는 데이터는 JSON이며, 문자열 형식으로 전송됩니다. 문자열은 인포테이블 대신 정보를 전송하는 데 사용됩니다. 이는 인포테이블이 라인 단위로 위젯에 전달되므로 추가 데이터 조작을 거쳐야만 차트에 제공될 수 있기 때문입니다. 문자열을 사용하면 데이터를 Dygraph 라이브러리로 한 번에 전송하여 차트를 렌더링할 수 있습니다. 이 JSON 형식은 CSV입니다. GenerateDygraphData 서비스 또는 GenerateDygraphData를 호출하는 서비스를 사용하여 인포테이블을 CSV로 변환할 수 있습니다. 자세한 내용은 http://dygraphs.com/data.html#csv를 참조하십시오.
GetJsonStringTrendHistory 서비스에 문자열로 보낸 데이터의 예:
{"isCustom":true,"trendType":"PerformanceHistory","displayId":
"Asset_CheeseCake_CleaningAndDryingMachine","endDate":1501819199000,
"startDate":1501732800000,"isZoomed":false,"zoomedMax":0,"zoomedMin":0}
SeriesVisibilities
차트의 계열에 대한 표시 유형 설정의 쉼표로 구분된 목록입니다. 각 목록 엔트리에 대한 형식은 <계열 색인>:<부울>입니다. 여기서 부울 값은 계열의 표시 여부를 지정합니다. 예:
0:true,1:true,2:false,3:false,4:true,5:false
이 속성은 서비스에서 계열의 표시 유형을 동적으로 설정하는 데 사용됩니다. SeriesVisibilities에 대해 값이 지정되지 않으면 SeriesVisibility<#> 속성 값이 사용됩니다.
SeriesVisibility<#>
차트에 계열 데이터를 표시할지 여부를 결정합니다. 이 속성은 차트 오른쪽의 정보 패널에서 계열에 대해 선택된 표시 유형에 매핑됩니다.
useValueRange, valueRangeMin 및 valueRangeMax
useValueRange를 선택하면 렌더링할 Y축에 대한 최소값(valueRangeMin) 및 최대값(valueRangeMax)을 설정할 수 있습니다.
zoomMax 및 zoomMin
차트에서 확대/축소가 수행되면 이러한 속성은 JSON 데이터를 사용하여 X축에서 가져온 최소 및 최대를 나타내는 새 값을 얻습니다. 날짜/시간 데이터 형식을 사용하는 경우 시간은 일반적으로 밀리초로 반환됩니다.
이러한 속성은 위젯의 스타일 속성 탭에서 찾을 수 있습니다.
속성
설명
SeriesStyle<#>
차트에 표시되는 계열 데이터 및 차트 오른쪽의 정보 패널에 있는 색상 사각형에 사용되는 색상입니다.
SeriesSecondAxis<#>
계열에 대한 Y축 표시를 차트의 왼쪽에 표시할지 오른쪽에 표시할지를 결정합니다. 확인란을 선택하면 오른쪽에 Y축이 표시됩니다. 확인란의 선택을 취소하면 왼쪽에 Y축이 표시됩니다. 이 속성은 차트 오른쪽의 정보 패널에서 계열에 대해 선택된 Y축 왼쪽 또는 오른쪽 표시에 매핑됩니다.
다음 그래픽은 ChartTitle, XLabel, YLabel 및 Y2Label에 지정된 값과 ConnectSeparatedPoints가 true로 설정된 예를 보여줍니다.
Dygraph 위젯 이벤트
이러한 이벤트는 위젯의 속성 탭에 있는 바인딩 섹션에서 사용할 수 있습니다.
이벤트
설명
DoubleClicked
이 이벤트는 두 번 클릭이 수행될 때 발생합니다. 차트를 두 번 클릭하면 데이터와 함께 제공된 원래 zoomMin 및 zoomMax 값을 사용하여 차트가 축소됩니다.
SyncRequest
EnableZoomSynchronizing 속성이 활성화된 경우 확대 또는 축소가 수행될 때 이 이벤트가 발생합니다. 이 이벤트를 사용하면 확대/축소 기능을 다른 그래프와 동기화할 수 있습니다. 이 이벤트는 동기화할 대상 그래프의 sync 서비스에 바인딩되어야 합니다.
Zoomed
이 이벤트는 확대/축소가 수행될 때 트리거됩니다. 이 이벤트를 zoomMin 및 zoomMax와 함께 사용하면 원본 데이터에 더 자세히 이동할 수 있습니다.
Dygraph 위젯 서비스
이러한 서비스는 위젯의 속성 탭에 있는 바인딩 섹션에서 사용할 수 있습니다.
서비스
설명
detach
호출될 경우, 현재 매쉬업의 모든 차트가 동기화되지 않습니다.
dygraphSynchronize
호출될 경우, 현재 매쉬업의 모든 차트가 동기화됩니다. 어떠한 추가 구성도 필요 없습니다.
resetZoom
확대/축소를 기본 상태로 수동으로 재설정합니다.
sync
그래프의 확대/축소를 호출 그래프와 동기화하는 SyncRequest 이벤트에 대한 리셉터입니다.
확대/축소 시 CustomBars를 사용하여 더 많은 정보 추가
대용량 데이터 집합의 평균을 계산하는 경우 일부 정보가 손실될 수 있습니다. 이 문제를 해결하는 한 가지 전략은 평균 계산과 더불어 사용자 정의 범위를 추가하는 것입니다. 여기서는 차트의 선 뒤에 있는 투명 색상 범위(값이 있는 범위를 나타냄)를 보여줍니다. 예를 들어, 다음과 유사한 표시를 보려면 추세 세부 정보 차트에서 값 범위 표시를 선택합니다.
평균이 5이며 값의 범위가 1 ~ 10인 경우 선은 5에 있고 투명 범위는 1 ~ 10입니다. 이 기능을 사용하려면 CustomBars 속성을 활성화하고 이에 따라 데이터를 변경합니다.
CustomBars가 활성화되지 않은 JSON 데이터의 예:
Date,point1,point2
예:
Date,trend1,trend2
2017-03-21,1,9
2017-03-22,2,2
2017-03-23,7,0
2017-03-24,3,5
CustomBars가 활성화된 JSON 데이터의 예:
Date,minPoint1;point1,maxPoint1,minPoint2;point2,maxPoint2;
예:
Date,trend1,trend2
2017-03-21,0;1;8,4;9;9
2017-03-22,1;2;6,0;2;8
2017-03-23,5;7;9,0;0;4
2017-03-24,2;3;4,4;5;6
여러 그래프 사이의 확대/축소 수준 동기화
여러 그래프 사이의 확대/축소를 동기화하는 방법에는 두 가지가 있습니다.
• Dygraphs 차트 라이브러리 기능 사용(권장) -
이 확대/축소 동기화는 Dygraphs 차트 라이브러리의 전체 라이브러리 기능과 기본 제공 기능을 사용합니다. 자세한 내용은 http://dygraphs.com/gallery/#g/synchronize를 참조하십시오.
이 확대/축소 동기화 방법 사용하기:
◦ 매쉬업이 로드될 때 페이지의 모든 차트를 동기화하려면, 매쉬업의 모든 차트에서 DygraphSynchDefault 확인란을 선택합니다. 기본값으로 이 확인란은 선택되어 있지 않습니다.
◦ 필요에 따라 현재 페이지의 모든 그래프를 동기화하거나 동기화를 취소하려면 dygraphSynchronize 및 detach 서비스를 사용합니다.
• ThingWorx 기능 사용 -
여러 그래프 사이의 확대/축소를 동기화하려면 소스 그래프의 SyncRequest 이벤트를 사용하고 이 이벤트를 대상 그래프의 sync 서비스에 바인딩합니다.
소스 위젯을 선택하고 SyncRequest를 대상 위젯에 끌어 놓은 다음 sync 서비스를 선택합니다.
양방향 확대/축소 동기화의 경우 반대 방향에서 이러한 단계를 반복하십시오.
대화식 확대/축소 만들기
다음 단계에서는 ThingWorx Composer에서 Dygraph 위젯에 대한 대화식 확대/축소를 구현하는 흐름을 설명합니다. 추세 세부 내용 페이지의 차트는 이 구현의 예입니다.
1. 원래 큰 데이터 집합으로 시작합니다.
2. 데이터 집합이 너무 큰 것으로 확인되면 차트의 점 개수를 평균화하거나 줄입니다.
3. 사용자가 확대하면 zoomMin 및 zoomMax를 가져와서 이 새 범위로 데이터를 다시 계산하여 2단계와 같이 유효성을 검사합니다. 점의 개수가 충분한 정도로 적은 경우에는 데이터 점의 개수를 평균화하거나 줄이는 대신 원시 데이터를 표시합니다.
4. 사용자가 축소하면 시작 시간 및 종료 시간이 있는 원래 데이터 집합으로 되돌아갑니다.
범례 및 레이블에 CSS 사용
차트 범례 및 레이블 표시는 CSS를 사용하여 형식이 지정됩니다. 이 형식은 매쉬업에 사용자 정의 CSS를 제공하여 CSS를 재정의할 수 있습니다. 여기에 참조할 수 있는 차트 범례 및 레이블의 기본 CSS가 나와 있습니다. 자세한 내용은 ThingWorx 도움말 센터의 사용자 지정 CSS를 참조하십시오.
차트 범례에 대한 기본 CSS:
.dygraph-legend {
position: absolute;
z-index: 10;
font-family: Arial;
font-size: 10px;
opacity: 0.75;
border: 1px solid black
border-radius: 2px;
padding: 6px;
width: 300px; /* labelsDivWidth */
/*
dygraphs determines these based on the presence of chart labels.
It might make more sense to create a wrapper div around the chart proper.
top: 0px;
right: 2px;
*/
background: white;
line-height: normal;
text-align: left;
overflow: overlay;
left: 600px !important
}
.dygraph-legend-line {
display: inline-block;
position: relative;
bottom: .5ex;
padding-left: 1em;
height: 1px;
border-bottom-width: 2px;
border-bottom-style: solid;
/* border-bottom-color is set based on the series color */
}
레이블에 대한 기본 CSS:
.dygraph-legend {
position: absolute;
z-index: 10;
font-family: Arial;
font-size: 10px;
opacity: 0.75;
border: 1px solid black
border-radius: 2px;
padding: 6px;
width: 300px; /* labelsDivWidth */
/*
dygraphs determines these based on the presence of chart labels.
It might make more sense to create a wrapper div around the chart proper.
top: 0px;
right: 2px;
*/
background: white;
line-height: normal;
text-align: left;
overflow: overlay;
left: 600px !important
}
.dygraph-legend-line {
display: inline-block;
position: relative;
bottom: .5ex;
padding-left: 1em;
height: 1px;
border-bottom-width: 2px;
border-bottom-style: solid;
/* border-bottom-color is set based on the series color */
}