IoT Guru Cloud - Esempio di grafico semplice: 4 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

IoT Guru Cloud fornisce una serie di servizi di backend tramite l'API REST e puoi integrare facilmente queste chiamate REST nella tua pagina web. Con Highcharts, puoi visualizzare i grafici delle tue misurazioni semplicemente con una chiamata AJAX.

Passaggio 1: crea una pagina HTML

Devi creare un file HTML vuoto con il tuo editor preferito:

IoT Guru Cloud - Esempio di grafico semplice

Salvalo: simple-chart.html IoT Guru Cloud - Esempio di grafico semplice

Passaggio 2: caricamento AJAX dei dati del grafico

È necessario aggiungere JQuery e una chiamata AJAX al file HTML, verrà caricata la serie di dati del nodo e del nome del campo specificati: IoT Guru Cloud - Esempio di grafico semplice

IoT Guru Cloud - Semplice funzione di esempio di grafico loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/ misura/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulation, dataType: "json", success: function (data) { displayChart(target, titleText, xAxisText, yAxisText, granulation, data); } }); } function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { } $(document).ready(function () { loadData('graphAverage', 'Ritardo medio dei treni (24 ore)', 'Data e ora ', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'media', 'DAY/288'); }

Passaggio 3: imposta il grafico

Aggiungi il file JavaScript di Highcharts al file HTML dopo il file JQuery:

Riempi il corpo della funzione displayChart per impostare il grafico:

funzione displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { var options = { title: { text: titleText }, chart: { type: 'spline', renderTo: target, }, xAxis: { type: 'datetime ', title: { text: xAxisText }, gridLineWidth: 1, tickInterval: 3600 * 1000 }, yAxis: { title: { text: yAxisText } }, series: [{}] }; for (var i = 0; i < data.length; i++) { options.series = {data: {}, name: {}}; options.series.name = data["nome"]; options.series.data = data["data"]; } var chart = new Highcharts. Chart(opzioni); }

Passaggio 4: è tutto! Fatto

Hai finito, carica il tuo HTML nel tuo browser e controlla il grafico!

Se desideri inviare misurazioni, visita la nostra pagina Tutorial o il nostro Forum della community!:)

Esempio completo: GitHub - grafico semplice