Cuprins:
2025 Autor: John Day | [email protected]. Modificat ultima dată: 2025-01-23 15:04
Cloud IoT Guru oferă o grămadă de servicii backend prin REST API și puteți integra aceste apeluri REST pe pagina dvs. web cu ușurință. Cu Highcharts, puteți afișa diagrame ale măsurătorilor dvs. pur și simplu cu un apel AJAX.
Pasul 1: creați o pagină HTML
Trebuie să creați un fișier HTML gol cu editorul dvs. preferat:
Cloud IoT Guru - Exemplu simplu de diagramă
Salvați-l: simple-chart.html IoT Guru Cloud - Exemplu de diagramă simplă
Pasul 2: încărcare AJAX a datelor din diagramă
Trebuie să adăugați JQuery și un apel AJAX în fișierul HTML, acesta va încărca seria de date a nodului specificat și numele câmpului: IoT Guru Cloud - Exemplu de diagramă simplă
IoT Guru Cloud - Exemplu de diagramă simplă funcție loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ Measurement / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulare, dataType: "json", succes: funcție (date) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document). ready (function () {loadData ('graphAverage', 'Întârziere medie a trenurilor (24 ore)', 'Data și ora' ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' mediu ',' DAY / 288 ');}
Pasul 3: Configurați diagrama
Adăugați fișierul JavaScript Highcharts în fișierul HTML după fișierul JQuery:
Completați corpul funcției displayChart pentru configurarea diagramei:
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: {}, nume: {}}; options.series .name = date ["name"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (opțiuni); }
Pasul 4: Asta e! Terminat
Ați terminat, încărcați codul HTML în browser și verificați graficul!
Dacă doriți să trimiteți măsurători, vă rugăm să vizitați pagina Tutoriale sau Forumul comunității!:)
Exemplu complet: GitHub - diagramă simplă
Recomandat:
Cum se folosește Contorul în Diagrama Scării? - Delta WPLSoft: 15 pași
Cum se folosește Contorul în Diagrama Scării? | Delta WPLSoft: În acest tutorial, arătăm cum să folosim contoare în aplicații în timp real ca exemplu
Noțiuni de bază despre IoT: conectarea IoT-ului dvs. la cloud utilizând sistemul de operare Mongoose: 5 pași
Noțiuni de bază despre IoT: conectarea IoT-ului dvs. la cloud folosind sistemul de operare Mongoose: dacă sunteți o persoană care se ocupă de bricolaj și electronică, cel mai adesea, veți întâlni termenul de Internet al obiectelor, de obicei abreviat ca IoT, și că se referă la un set de dispozitive care se pot conecta la internet! A fi o astfel de persoană
Începeți cu Kicad - Diagramă schematică: 9 pași
Începeți cu Kicad - Diagramă schematică: Kicad este o alternativă gratuită și open source la sistemele CAD pentru PCB-uri comerciale, nu mă înțelegeți greșit EAGLE și altele asemenea sunt foarte bune, dar versiunea gratuită a EAGLE uneori este scurtă și versiunea pentru studenți durează doar 3 ani, deci Kicad este un excelent
Construiți o stație meteo simplă IOT: 4 pași
Construiți o stație meteo IOT simplă: În acest tutorial, vom construi o stație meteo minunată (are tablou de bord și chat!), Dar simplă, stația meteo IoT utilizând Zuino XS PsyFi32 de la Zio și ultima noastră încorporare în familia Qwiic, Zio Qwiic Air Senzor de presiune ! Consiliul de administrație
Diagrama cablajului motorului mașinii de spălat: 6 pași
Schema de cablare a motorului mașinii de spălat: Pentru a putea conecta motorul mașinii de spălat sau motorul universal, vom avea nevoie de o diagramă numită diagrama de cablare a motorului mașinii de spălat, aceasta poate fi utilizată pentru a conecta acest motor universal pe 220v c.a sau c.c. aceeași diagramă