Innehållsförteckning:
2025 Författare: John Day | [email protected]. Senast ändrad: 2025-01-23 15:11
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
Rekommenderad:
Hur man gör ditt eget operativsystem! (sats och Exempel inuti): 5 steg
Hur man gör ditt eget operativsystem! (sats och exempel inuti): Gör det nu
Modernt och nytt och enklare exempel på skåp med Arduino Matrix -knappsats 4x4: 3 steg
Modernt och nytt och enklare exempel på skåp med Arduino Matrix -knappsats 4x4: Ett annat exempel på att använda en LCD -knappsatsmatris 4x4 med en I2C -krets
APP INVENTOR 2 - Clean Front Tips (+4 Exempel): 6 steg
APP INVENTOR 2 - Clean Front Tips (+4 Exempel): Vi ska se hur vi kan få din App på AI2 att se estetisk ut :) Ingen kod den här gången, bara tips för en smidig app som de fyra exemplen ovan
Eagle Hacks/tricks: Exempel TB6600 CNC Mill Stepper Motor Driver: 7 Steg
Eagle Hacks/tricks: Exempel TB6600 CNC Mill Stepper Motor Driver: Detta gör det till ett bra projekt att visa de få knep som kommer att göra ditt liv enklare när du skapar PCB. För att lära dig några hack så att du får ut mer av Eagle, jag väljer ett enkelt projekt som jag gjorde för min Kickstarter. Jag behövde en extern
Komplett guide för användning av jordfuktighetssensor med praktiskt exempel: 7 steg
Komplett guide för användning av jordfuktighetssensor med praktiskt exempel: Du kan läsa denna och andra fantastiska självstudier på ElectroPeaks officiella webbplats Översikt I denna handledning lär du dig hur du använder en jordfuktighetssensor. Praktiska exempel finns också för att hjälpa dig att behärska koden. Vad du lär dig: Hur smutsar