Personalizzazione della presentazione > Widget di ThingWorx Apps > Widget Dygraph
Widget Dygraph
Il widget Dygraph è utile per visualizzare qualsiasi grafico di una serie temporale. In ThingWorx Apps, il widget viene utilizzato in diversi contesti.
• In Trending e risoluzione dei problemi, per il grafico nella pagina dei dettagli di un trend (PTC.Factory.TrendTroubleshooting.TrendDetail)
• In Controls Advisor, per i grafici Numero di client e Numero di tag (PTC.Factory.KEPServerEX.DetailPage)
• In KPI di produzione, per i grafici Cronologia stato e Trend KPI nella pagina Dati cronologia produzione (PTC.Factory.ProductionHistoricalData, PTC.Factory.C_ProductionHistoricalData_ [VersioneRelease])
• In Asset Advisor, per il grafico Stato questa settimana nella pagina Prestazioni (PTC.SCA.SCO.AssetMonitor.AssetDetail.PerformanceMonitorContainerMashup)
Queste implementazioni possono essere citate a titolo di esempio.
Il widget Dygraph implementa un sottoinsieme di funzionalità dalla libreria dei grafici Dygraphs ed è stato personalizzato per l'uso in ThingWorx Apps. Nonostante la documentazione di Dygraphs ( http://dygraphs.com/) possa essere una risorsa utile, solo le funzionalità documentate in questo argomento sono supportate per l'uso con il widget Dygraph.
Servizi di utilità del widget Dygraph
L'oggetto PTC.SCA.SCO.DygraphUtils contiene un servizio che consente di generare dati nel formato corretto per la proprietà JSONData nel widget. Il servizio GenerateDygraphData fornisce i dati cronologici di un elenco specificato di proprietà dello stream di valori di un oggetto o del database, in un formato visualizzabile per il widget Dygraph. Dato un insieme valido di input, questo servizio restituisce dati in formato CSV che possono essere associati alla proprietà JSONData nel widget. È possibile creare nuovi servizi che utilizzano il servizio GenerateDygraphData per generare dati specifici per il widget nei singoli mashup.
L'oggetto PTC.SCA.SCO.DygraphUtils contiene anche i servizi utilizzati dal widget nei mashup PTC.Factory.ProductionHistoricalData e PTC.Factory.C_ProductionHistoricalData_[VersioneRelease].
• GenerateKPIPropertiesHistoryForDygraph - Recupera le informazioni sulla cronologia delle proprietà degli indicatori KPI visualizzate per l'intervallo di tempo selezionato nel grafico Trend KPI nella pagina Dati cronologia produzione di un componente di impianto in KPI di produzione. Questo servizio è un esempio di utilizzo del servizio GenerateDygraphData per ottenere dati cronologici di proprietà specifiche direttamente dal database.
• GenerateStatusHistoryForDygraph - Recupera le informazioni sulla cronologia dello stato visualizzate nel grafico Cronologia stato nella pagina Dati cronologia produzione di un componente di impianto in KPI di produzione. Recupera inoltre le informazioni visualizzate nella pagina Prestazioni di Asset Advisor. Questo servizio recupera le informazioni sul cambiamento dello stato per l'intervallo di tempo selezionato e il punto dati immediatamente precedente all'intervallo di tempo selezionato. In questo modo vengono visualizzate le informazioni sullo stato applicabili per l'intero intervallo di tempo selezionato e non solo i cambiamenti di stato che si verificano durante l'intervallo di tempo selezionato.
Proprietà attinenti del widget Dygraph
Queste proprietà sono disponibili nella scheda Proprietà del widget, in Impostazioni.
Proprietà
Descrizione
annotationsDivName
Elemento div HTML in cui vengono visualizzate le informazioni di annotazione. Si tratta di un elemento visualizzato all'esterno del widget. Per posizionare div in un punto qualsiasi all'interno del mashup, creare un elemento HTML e posizionare div all'interno di tale elemento. Un esempio è rappresentato dalle annotazioni visualizzate quando un utente fa clic su una casella evento di modifica nel grafico Trend KPI.
ConnectSeparatedPoints
Quando la casella di controllo è selezionata, eventuali spazi vuoti nei dati sono collegati sul grafico.
CustomBars
Quando la casella di controllo è selezionata, ogni cella CSV viene analizzata come "low;middle;high". Le barre di errore vengono disegnate per ogni punto tra basso e alto, con la serie stessa che attraversa il centro. Questa proprietà viene utilizzata principalmente come modo per visualizzare l'intervallo quando nel grafico viene mostrato un valore medio. Ciò consente di visualizzare meno punti, continuando al contempo a mostrare dove un punto era più alto o più basso del previsto.
dateFormat, useDateFormat
Consente di definire il formato della data dell'asse X. Viene utilizzata la seguente funzione della libreria JavaScript Moment.js: moment(date).format(XXX)
DisplayTagName
Quando la casella di controllo è selezionata, il nome completo del tag o della proprietà viene visualizzato nella legenda del grafico insieme al valore. Per i nomi lunghi di tag o proprietà, questo può comportare il troncamento dei dati. Quando la casella di controllo è selezionata, al posto del nome viene visualizzato un trattino dello stesso colore del quadrato per il nome del tag o della proprietà. I quadrati colorati per i nomi di tag o proprietà vengono visualizzati nel pannello delle informazioni a destra del grafico.
DrawAxisX, DrawAxisY, DrawAxisY2
Quando la casella di controllo è selezionata, la linea d'asse orizzontale con i valori viene visualizzata sul grafico per l'asse corrispondente.
DrawGridX, DrawGridY, DrawGridY2
Quando la casella di controllo è selezionata, la linea della griglia verticale viene visualizzata sul grafico per l'asse corrispondente.
DrawPoints
Quando la casella di controllo è selezionata, tutti i punti vengono visualizzati in modo permanente sul grafico, anziché solo al passaggio del mouse.
DygraphSynchDefault
Quando la casella di controllo è selezionata, la funzionalità di sincronizzazione della libreria di grafici di Dygraphs viene chiamata quando il mashup è caricato e tutti i grafici nella pagina sono sincronizzati. Questa casella di controllo deve essere selezionata per tutti i grafici nel mashup per il corretto funzionamento della funzionalità. Per default, la casella di controllo è deselezionata.
FillArea
Quando la casella di controllo è selezionata, l'area definita dalla linea viene riempita di colore. Questa proprietà non è compatibile con una barra personalizzata.
HideY-AxisValues
Quando la casella di controllo è selezionata, i numeri per l'asse Y sono nascosti, ma le linee d'asse continuano a essere visualizzate.
LegendPosition
Determina la posizione della legenda sul grafico. Il valore di default è On Mouse Over.
showDecimal
Quando la casella di controllo è selezionata, le etichette per i valori decimali vengono visualizzate sull'asse Y.
StackedGraph
Quando la casella di controllo è selezionata, le linee del grafico sono impilate.
Stepped
Quando la casella di controllo è selezionata, la linea del grafico viene tracciata a gradini tra i punti, anziché come una linea retta.
useAnnotation
Selezionare questa casella di controllo per utilizzare annotationsJSON o annotationsDivName.
UsePercentageFormat
Quando la casella di controllo è selezionata, i valori dell'asse Y vengono visualizzati come percentuali. Si applica solo all'asse Y sinistro.
Le proprietà riportate di seguito sono disponibili nella scheda Proprietà del widget, in Associazioni.
Proprietà
Descrizione
annotationsJSON
JSON che viene analizzato per aggiungere l'annotazione al grafico.
ChartTitle, XLabel, YLabel, Y2Label
Etichette per il grafico e per ogni asse. Se non viene specificato nulla, non viene visualizzata nessuna etichetta. Il riempimento per il testo delle etichette viene aggiunto automaticamente al grafico.
DataLabel<#>
Se viene specificato, fornisce l'etichetta utilizzata per la serie. Se lasciato vuoto, JSONData può fornire l'etichetta dati. Se viene specificato DataLabel<#>, le funzionalità del secondo asse Y non possono essere utilizzate con la serie.
DateWindowEnd e DateWindowStart
Momento di inizio e di fine per l'intervallo iniziale dell'asse X quando viene visualizzato il grafico.
DisableVerticalZoom
Quando la casella di controllo è selezionata, lo zoom verticale per il grafico è disattivato.
EnableZoomSynchronizing
Quando la casella di controllo è selezionata, il grafico può sincronizzare lo zoom con un altro grafico.
HexColors
Elenco separato da virgole di valori di colori esadecimali utilizzati per i dati della serie visualizzati nel grafico, con un valore per ogni serie nel grafico. Ad esempio: #a2a2a2,#f2b927,#3ec556,#09aec6,#ed684a,#a2a2a2. Questa proprietà viene utilizzata dai servizi per impostare dinamicamente i colori della serie. Se non viene specificato alcun valore per HexColors, viene utilizzato il valore della proprietà SeriesStyle<#>.
HideSeries<#>InLegend
Quando la casella di controllo è selezionata, la serie è nascosta dalla legenda del grafico.
isZoomed
Consente di verificare se il grafico è attualmente ingrandito. Questa proprietà è utile sul lato mashup o servizio per gestire i diversi casi di utilizzo dello zoom (zoom quando lo zoom è già applicato, aggiornamento dei dati quando lo zoom è applicato e mantenuto).
JSONData
I dati utilizzati nel grafico sono dati JSON, inviati in formato stringa. Per inviare le informazioni viene utilizzata una stringa anziché una infotable, perché le infotable vengono passate al widget riga per riga, richiedendo un'ulteriore modifica dei dati perché sia possibile caricarli nel grafico. L'utilizzo di una stringa consente di inviare tutti i dati in una sola volta alla libreria Dygraph per il rendering del grafico. Il formato per questo JSON è CSV. Per convertire una infotable nel formato CSV, è possibile utilizzare il servizio GenerateDygraphData o un servizio che effettua la chiamata a GenerateDygraphData. Per ulteriori informazioni, vedere: http://dygraphs.com/data.html#csv.
Esempio dei dati inviati come stringa al servizio GetJsonStringTrendHistory:
{"isCustom":true,"trendType":"PerformanceHistory","displayId":
"Asset_CheeseCake_CleaningAndDryingMachine","endDate":1501819199000,
"startDate":1501732800000,"isZoomed":false,"zoomedMax":0,"zoomedMin":0}
SeriesVisibilities
Elenco di impostazioni di visibilità separate da virgole per la serie nel grafico. Il formato di ciascuna voce di elenco è <indice serie>:<booleano>, dove il valore booleano specifica se la serie è visibile. Ad esempio,
0:true,1:true,2:false,3:false,4:true,5:false
questa proprietà viene utilizzata dai servizi per impostare dinamicamente la visibilità della serie. Se non viene specificato alcun valore per SeriesVisibilities, viene utilizzato il valore della proprietà SeriesVisibility<#>.
SeriesVisibility<#>
Determina se i dati della serie vengono visualizzati nel grafico. Questa proprietà viene mappata alla selezione della visibilità per la serie nel pannello delle informazioni a destra del grafico.
useValueRange, valueRangeMin e valueRangeMax
Quando useValueRange è selezionato, è possibile impostare un valore minimo (valueRangeMin) e massimo (valueRangeMax) per il rendering dell'asse Y.
zoomMax e zoomMin
Quando viene applicato un valore di zoom al grafico, queste proprietà ottengono un nuovo valore indicante il minimo e il massimo presi dall'asse X, in base ai dati JSON. Se si utilizza un formato di dati data/ora, l'ora viene in genere restituita in millisecondi.
Queste proprietà sono disponibili nella scheda Proprietà stile del widget.
Proprietà
Descrizione
SeriesStyle<#>
Colore utilizzato per i dati della serie visualizzati nel grafico e per il quadrato colorato nel pannello delle informazioni a destra del grafico.
SeriesSecondAxis<#>
Determina se l'asse Y per la serie viene visualizzato sul lato sinistro o destro del grafico. Quando la casella di controllo è selezionata, l'asse Y viene visualizzato sulla destra. Quando la casella di controllo è deselezionata, l'asse Y viene visualizzato sulla sinistra. Questa proprietà viene mappata alla selezione della visualizzazione dell'asse Y a sinistra o a destra per la serie nel pannello delle informazioni a destra del grafico.
L'immagine seguente mostra un esempio di valori specificati per ChartTitle, XLabel, YLabele Y2Label, nonché per ConnectSeparatedPoints impostati su true.
Eventi del widget Dygraph
Gli eventi riportati di seguito sono disponibili nella scheda Proprietà del widget nella sezione Associazioni.
Evento
Descrizione
DoubleClicked
Questo evento si verifica quando si esegue un doppio clic. Quando si fa doppio clic, viene eseguito lo zoom indietro del grafico utilizzando i valori originali zoomMin e zoomMax forniti con i dati.
SyncRequest
Se la proprietà EnableZoomSynchronizing è attivata, questo evento si verifica quando viene eseguito lo zoom avanti o lo zoom indietro. Utilizzare questo evento per sincronizzare la funzionalità di zoom con un altro grafico. Per la sincronizzazione, è necessario associare questo evento al servizio sync del grafico di destinazione.
Zoomed
Questo evento si verifica quando si esegue uno zoom. Utilizzare questo evento con zoomMin e zoomMax per visualizzare in dettaglio i dati originali.
Servizi del widget Dygraph
I servizi riportati di seguito sono disponibili nella scheda Proprietà del widget nella sezione Associazioni:
Servizio
Descrizione
detach
Quando viene chiamato, tutti i grafici nel mashup corrente vengono desincronizzati.
dygraphSynchronize
Quando viene chiamato, tutti i grafici nel mashup corrente vengono sincronizzati. Non è necessaria alcuna configurazione aggiuntiva.
resetZoom
Consente di ripristinare manualmente lo stato di default dello zoom.
sync
Recettore dell'evento SyncRequest per sincronizzare lo zoom del grafico con il grafico chiamante.
Utilizzo di CustomBars per aggiungere altre informazioni durante lo zoom
Quando si calcola la media di un insieme di dati di grandi dimensioni, è possibile che alcune informazioni vadano perse. Una strategia per risolvere questo problema consiste nell'aggiungere l'intervallo personalizzato al calcolo della media. Dietro le linee del grafico viene così visualizzato un intervallo colorato trasparente, che indica l'intervallo in cui si collocano i valori. Per un esempio, selezionare Mostra intervallo valori nel grafico dei dettagli di un trend per ottenere un risultato di visualizzazione analogo al seguente:
Se la media è 5 e i valori spaziano da 1 a 10, le linee vengono visualizzate in corrispondenza del 5 e viene mostrato un intervallo trasparente da 1 a 10. Per utilizzare questa funzionalità, attivare la proprietà CustomBars e modificare i dati di conseguenza.
Esempio di dati JSON senza proprietà CustomBars attivata:
Date,point1,point2
Ad esempio:
Date,trend1,trend2
2017-03-21,1,9
2017-03-22,2,2
2017-03-23,7,0
2017-03-24,3,5
Esempio di dati JSON con proprietà CustomBars attivata:
Date,minPoint1;point1,maxPoint1,minPoint2;point2,maxPoint2;
Ad esempio:
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
Sincronizzazione del livello di zoom tra più grafici
Esistono due metodi per sincronizzare lo zoom tra più grafici:
• Utilizzo della funzionalità della libreria di grafici di Dygraphs (consigliata) -
La sincronizzazione dello zoom utilizza le funzionalità di libreria complete e le funzionalità incorporate della libreria di grafici di Dygraphs. Per ulteriori informazioni, vedere http://dygraphs.com/gallery/#g/synchronize.
Per utilizzare questo metodo di sincronizzazione dello zoom, attenersi alla procedura riportata di seguito.
◦ Per sincronizzare tutti i grafici nella pagina quando il mashup è caricato, selezionare la casella di controllo DygraphSynchDefault in tutti i grafici nel mashup. Per default, la casella di controllo è deselezionata.
◦ Utilizzare i servizi dygraphSynchronize e detach per sincronizzare e desincronizzare tutti i grafici nella pagina corrente in base alle esigenze.
• Utilizzo della funzionalità ThingWorx -
Per sincronizzare gli zoom tra più grafici, utilizzare l'evento SyncRequest del grafico di origine e associarlo al servizio sync del grafico di destinazione.
Selezionare il widget di origine, trascinare e rilasciare l'evento SyncRequest sul widget di destinazione e selezionare il servizio sync.
Per la sincronizzazione dello zoom bidirezionale, ripetere questa procedura nella direzione opposta.
Creazione di uno zoom interattivo
Nei passi seguenti viene descritto il flusso per l'implementazione di uno zoom interattivo per il widget Dygraph in ThingWorx Composer. Il grafico nella pagina dei dettagli di un trend è un esempio di questa implementazione.
1. Iniziare con un insieme di dati di grandi dimensioni originale.
2. Se l'insieme di dati risulta essere di dimensioni troppo grandi, calcolare la media o ridurre il numero di punti sul grafico.
3. Quando l'utente esegue lo zoom avanti, vengono presi i valori di zoomMin e zoomMax e vengono ricalcolati i dati utilizzando questo nuovo intervallo, eseguendo la convalida come nel passo 2. Se il numero di punti è sufficientemente ridotto, vengono mostrati i dati grezzi anziché calcolare la media o ridurre il numero di punti.
4. Quando l'utente esegue lo zoom indietro, si torna all'insieme di dati originale con le relative ore di inizio e di fine.
Utilizzo del CSS per la legenda e le etichette
La visualizzazione della legenda e delle etichette del grafico viene formattata utilizzando il CSS, che può essere sostituito fornendo un CSS personalizzato nel mashup. Il CSS di default per la legenda e le etichette del grafico viene fornito di seguito come riferimento. Per ulteriori informazioni, vedere CSS personalizzato in ThingWorx Help Center.
CSS di default per la legenda del grafico:
.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 di default per le etichette:
.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 */
}