Cloud IoT Guru - Exemplu de diagramă simplă: 4 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

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ă