IoT Guru mākonis - vienkāršs diagrammas piemērs: 4 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:54

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