Utilizzo dei widget > 2D > Grafico serie temporale
  
Grafico serie temporale
Qual è la funzione di questo widget?
Il widget Grafico serie temporale è progettato per l'utilizzo con i dati delle serie temporali in cui l'asse X rappresenta il tempo. Questo grafico supporta solo il rendering di marker a linee e/o a punti.
* 
I dati devono essere associati al widget Grafico serie temporale.
Quando va utilizzato questo widget?
È possibile utilizzare un widget Grafico serie temporale per illustrare punti dati a intervalli di tempo consecutivi. Ad esempio, se si desidera visualizzare un grafico che mostri gli RPM di un autocarro nell'ultima ora, si può utilizzare un widget Grafico serie temporale e associare al widget come Dati la proprietà RPM dell'autocarro connesso.
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
Passi fondamentali richiesti per l'uso
Come si presenta
1. Trascinare e rilasciare un widget Grafico serie temporale nell'area di lavoro.
2. Nel riquadro Dati, cercare un'entità con un servizio che restituisce dati cronologici.
3. Dopo avere aggiunto il servizio, trascinare e rilasciare Tutti gli elementi nel widget e selezionare Dati nella finestra Seleziona destinazione associazione.
4. Selezionare una proprietà dal menu a discesa Campo asse X. Nell'esempio abbiamo selezionato Speed.
5. Selezionare una proprietà dal menu a discesa Campo asse Y. Nell'esempio abbiamo selezionato RPM.
Campi di configurazione assistita in seguito all'associazione dei dati ThingWorx
Dopo avere associato i dati ThingWorx al widget, alcuni campi vengono completati con le opzioni di un elenco a discesa. Ad esempio, se si associa Tutti gli elementi al widget Grafico serie temporale e si seleziona Dati nella finestra Seleziona destinazione associazione, le proprietà Campo asse X e Campo asse Y vengono completate con le opzioni disponibili.
Definire lo stile del widget con JavaScript e CSS
Per definire lo stile del widget è possibile utilizzare JavaScript. Esempio:
* 
È consigliabile assegnare nomi univoci alle classi in modo che non siano in conflitto con altre classi o proprietà predefinite.
Esempio
Come si presenta
Immettere quanto segue nell'editor JavaScript:
// Chart Legends
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#ffffff";
Chart.defaults.global.defaultFontColor="#0000ff";
Chart.defaults.global.defaultFontSize=10;
Chart.defaults.global.title.display=true;
//For timeseries LINES
Chart.defaults.global.elements.line.backgroundColor="#ffffff";
Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)';
// for time series POINTS
Chart.defaults.global.elements.point.backgroundColor="#ffffff";
Chart.defaults.global.elements.point.borderColor="#007777";
Chart.defaults.global.elements.point.radius=2;
Immettere quanto segue nell'editor JavaScript:
1. Immettere quanto segue nell'editor JavaScript:
// Time Series lines
Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)';
Chart.defaults.global.elements.line.backgroundColor="#add8e6"
Chart.defaults.global.elements.line.fill='top';
// Time Series points
Chart.defaults.global.elements.point.backgroundColor="rgba(255, 255, 0, 0.7)";
Chart.defaults.global.elements.point.borderColor="rgba(255, 0, 0, 1)";
Chart.defaults.global.elements.point.radius=5;
// Time Series chart legend, title, font settings
Chart.defaults.global.defaultFontColor="#0000ff";
Chart.defaults.global.legend.display=true;
Chart.defaults.global.legend.labels.fontColor="#ff0000";
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.title.text="Title of line chart";
Chart.defaults.global.title.display=true;
2. Aggiungere la classe seguente nell'editor dell'applicazione:
.ptc-TimeSeries {
height: 400px;
}
3. Immettere la nuova classe nel campo Classe del grafico della serie temporale.
1. Immettere quanto segue nell'editor JavaScript:
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#5bb73b";
Chart.defaults.global.defaultFontColor="#007a3e";
Chart.defaults.global.defaultFontSize=14;
Chart.defaults.global.title.display=true;
//For timeseries LINES
Chart.defaults.global.elements.line.backgroundColor="#ffffff";
Chart.defaults.global.elements.line.borderColor="#5bb73b";
2. Aggiungere la classe seguente nell'editor dell'applicazione:
.ptc-TimeSeries {
height: 400px;
}
3. Immettere la nuova classe nel campo Classe del grafico della serie temporale.
Per un elenco completo delle proprietà che si possono aggiornare, vedere https://www.chartjs.org/docs/latest.
Per ulteriori informazioni, vedere Utilizzo di JavaScript in Vuforia Studio e Stili dell'applicazione.