IoT Guru Cloud - Enkelt diagram Exempel: 4 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

IoT Guru Cloud tillhandahåller ett gäng backend -tjänster via REST API och du kan enkelt integrera dessa REST -samtal till din webbsida. Med Highcharts kan du visa diagram över din mätning helt enkelt med ett AJAX -samtal.

Steg 1: Skapa en HTML -sida

Du måste skapa en tom HTML -fil med din favoritredigerare:

IoT Guru Cloud - Enkelt diagramexempel

Spara det: simple -chart.html IoT Guru Cloud - Enkelt diagramexempel

Steg 2: AJAX -laddning av diagramdata

Du måste lägga till JQuery och ett AJAX -samtal till HTML -filen, det kommer att ladda dataserien för den angivna noden och fältnamnet: IoT Guru Cloud - Enkelt diagramexempel

IoT Guru Cloud - Enkel diagramexempel funktion loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ measure/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', 'Genomsnittlig fördröjning av tåg (24 timmar)', 'Datum och tid) ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' genomsnitt ',' DAG/288 ');}

Steg 3: Sätt upp diagrammet

Lägg till Highcharts JavaScript -filen i HTML -filen efter JQuery -filen:

Fyll i displaydiagramfunktionen för att ställa in diagrammet:

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

Steg 4: Det är det! Gjort

Du är klar, ladda din HTML i din webbläsare och kontrollera diagrammet!

Om du vill skicka mätningar, besök vår handledningssida eller vårt communityforum!:)

Komplett exempel: GitHub - enkelt diagram