IoT Guru Cloud - Enkelt diagram Eksempel: 4 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

IoT Guru Cloud tilbyr en haug med backend -tjenester gjennom REST API, og du kan enkelt integrere disse REST -anropene på nettstedet ditt. Med Highcharts kan du bare vise diagrammer over målingen din med et AJAX -anrop.

Trinn 1: Lag en HTML -side

Du må lage en tom HTML -fil med favorittredigereren din:

IoT Guru Cloud - Enkelt diagrameksempel

Lagre det: simple -chart.html IoT Guru Cloud - Enkelt diagrameksempel

Trinn 2: AJAX Masse kartdata

Du må legge til JQuery og et AJAX -anrop til HTML -filen, det vil laste inn dataserien for den angitte noden og feltnavnet: IoT Guru Cloud - Enkelt diagrameksempel

IoT Guru Cloud - Enkel diagrameksempelfunksjon loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ måling/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulering, 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', 'Average delay of train (24 hours)', 'Date and time ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' gjennomsnitt ',' DAY/288 ');}

Trinn 3: Sett opp diagrammet

Legg til Highcharts JavaScript -filen i HTML -filen etter JQuery -filen:

Fyll delen av displayChart -funksjonen for å sette opp diagrammet:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, diagram: {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: {}, navn: {}}; options.series .name = data ["navn"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (alternativer); }

Trinn 4: Det er det! Ferdig

Du er ferdig, last inn HTML -koden i nettleseren din og sjekk diagrammet!

Hvis du vil sende målinger, kan du besøke vår veiledningsside eller vårt fellesskapsforum!:)

Fullstendig eksempel: GitHub - enkelt diagram