Innholdsfortegnelse:
2025 Forfatter: John Day | [email protected]. Sist endret: 2025-01-23 15:02
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
Anbefalt:
Hvordan lage ditt eget operativsystem! (batch og eksempel på innsiden): 5 trinn
Hvordan lage ditt eget operativsystem! (batch og eksempel på innsiden): Gjør det nå
Moderne og nytt og enklere eksempel på skap med Arduino Matrix -tastatur 4x4: 3 trinn
Moderne og nytt og enklere eksempel på skap med Arduino Matrix -tastatur 4x4: Et annet eksempel på bruk av en LCD -tastaturmatrise 4x4 med en I2C -krets
APP INVENTOR 2 - Clean Front Tips (+4 eksempel): 6 trinn
APP INVENTOR 2 - Clean Front Tips (+4 eksempel): Vi skal se hvordan vi kan få appen din på AI2 til å se estetisk ut :) Ingen kode denne gangen, bare tips for en jevn app som de fire eksemplene på toppen
Eagle Hacks/tricks: Eksempel TB6600 CNC Mill Stepper Motor Driver: 7 trinn
Eagle Hacks/tricks: Eksempel TB6600 CNC Mill Stepper Motor Driver: Dette gjør det til et godt prosjekt å vise de få triksene som vil gjøre livet ditt enklere når du lager PCB. For å lære deg noen hacks, slik at du får mer ut av Eagle, jeg velger et enkelt prosjekt som jeg gjorde for min Kickstarter. Jeg trengte en ekstern
Komplett veiledning for bruk av jordfuktighetssensor m/ praktisk eksempel: 7 trinn
Komplett guide for bruk av jordfuktighetssensor m/ praktisk eksempel: Du kan lese denne og andre fantastiske opplæringsprogrammer på ElectroPeaks offisielle nettsted Oversikt I denne opplæringen lærer du hvordan du bruker en jordfuktighetssensor. Praktiske eksempler er også gitt for å hjelpe deg med å mestre koden. Hva du vil lære: Hvordan jord