Satura rādītājs:
2025 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2025-01-23 14:59
IoT Guru Cloud nodrošina virkni aizmugures pakalpojumu, izmantojot REST API, un jūs varat viegli integrēt šos REST zvanus savā tīmekļa lapā. Izmantojot Highcharts, jūs varat parādīt mērījumu diagrammas, vienkārši izmantojot AJAX zvanu.
1. darbība: izveidojiet HTML lapu
Izmantojot iecienītāko redaktoru, jāizveido tukšs HTML fails:
IoT Guru Cloud - vienkāršs diagrammas piemērs
Saglabājiet to: simple -chart.html IoT Guru Cloud - vienkāršs diagrammas piemērs
2. darbība: AJAX diagrammas datu ielāde
HTML failam jāpievieno JQuery un AJAX izsaukums, tiks ielādēta norādītā mezgla un lauka nosaukuma datu sērija: IoT Guru Cloud - vienkāršs diagrammas piemērs
IoT Guru Cloud - vienkārša diagrammas piemēra funkcija loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ asurement/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulācija, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } funkcija displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Vilcienu vidējā kavēšanās (24 stundas)', 'Datums un laiks ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' vidējais ',' DAY/288 ');}
3. darbība: iestatiet diagrammu
Pievienojiet Highcharts JavaScript failu HTML failam pēc JQuery faila:
Aizpildiet displeja diagrammas pamattekstu, lai izveidotu diagrammu:
funkcija displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, diagramma: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, sērija: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {dati: {}, nosaukums: {}}; options.series .name = data ["name"]; options.series .data = dati ["dati"]; } var diagramma = jauna Highcharts. Chart (opcijas); }
4. solis: Tieši tā! Gatavs
Jūs esat pabeidzis, ielādējiet HTML savā pārlūkprogrammā un pārbaudiet diagrammu!
Ja vēlaties nosūtīt mērījumus, lūdzu, apmeklējiet mūsu pamācību lapu vai mūsu kopienas forumu!:)
Pilns piemērs: GitHub - vienkārša diagramma
Ieteicams:
Joslu diagrammas pulkstenis IOT (ESP8266 + 3D drukāts korpuss): 5 soļi (ar attēliem)
Joslu diagrammas pulkstenis IOT (ESP8266 + 3D drukāts korpuss): Sveiki, šajā pamācībā es jums paskaidrošu, kā izveidot IOT 256 LED joslu diagrammas pulksteni. Šo pulksteni nav ļoti grūti izgatavot, tas nav ļoti dārgi, taču jums tas būs jādara pacietīgs, lai pateiktu laiku ^^, bet to ir patīkami pagatavot un pilns ar mācībām
Reāllaika diagrammas uzzīmēšana operētājsistēmā Android no Arduino līdz HC-05: 3 soļi
Reāllaika diagrammas uzzīmēšana operētājsistēmā Android no Arduino līdz HC-05: Sveiki, šeit ir apmācība par to, kā reāllaikā attēlot vērtību grafiku no mikrokontrollera, piemēram, Arduino, uz lietotni. Tas izmanto Bluetooth moduli, piemēram, HC-05, lai darbotos kā ziņojumapmaiņas ierīce, lai pārsūtītu un saņemtu datus starp Ar
IOT laika mākonis - OpenWeatherMaps izmantošana: 11 soļi (ar attēliem)
IOT laika mākonis - izmantojot OpenWeatherMaps: Šis ir mākonis, kas karājas pie istabas griestiem un atskaņo noteiktus modeļus, pamatojoties uz rezultātu, kas atgriezts no interneta. Tas izgūst laika apstākļu datus no OpenWeatherMaps. To var kontrolēt manuāli, izmantojot tīmekļa saskarni, vai automātiski
Bezvadu sensoru datu vizualizēšana, izmantojot Google diagrammas: 6 soļi
Bezvadu sensoru datu vizualizēšana, izmantojot Google diagrammas: Lai samazinātu iekārtas dīkstāvi, ir ļoti nepieciešama mašīnu prognozējoša analīze. Regulāra pārbaude palīdz palielināt mašīnas darba laiku un, savukārt, palielina tās kļūdu toleranci. Bezvadu vibrācijas un temperatūras sensori
KĀ IZLASĪT ĶĒDES DIAGRAMMAS: 4 soļi
KĀ LASĪT shēmas shēmas: šī pamācība jums parādīs, kā tieši izlasīt visas šīs mulsinošās shēmas un pēc tam kā samontēt shēmas uz maizes dēļa! Visiem elektronikas entuziastiem tas ir MUST-READ instrukcija. Zinot, kā lasīt shēmas ir