IoT Guru pilv - lihtsa diagrammi näide: 4 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

IoT Guru Cloud pakub REST API kaudu hulga taustaprogramme ja saate need REST -kõned oma veebisaidile hõlpsalt integreerida. Highchartsi abil saate oma mõõtmiste diagramme kuvada lihtsalt AJAX -kõne abil.

Samm: looge HTML -leht

Peate oma lemmikredaktoriga looma tühja HTML -faili:

IoT Guru Cloud - lihtne diagramminäide

Salvestage see: simple -chart.html IoT Guru Cloud - lihtne diagramminäide

2. samm: diagrammi andmete AJAX laadimine

Peate HTML -faili lisama JQuery ja AJAX -kõne, see laadib määratud sõlme ja välja nime andmesarja: IoT Guru Cloud - lihtne diagramminäide

IoT Guru pilv - lihtne diagramminäite funktsioon loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ asurement/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granuleerimine, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } funktsioon displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Rongide keskmine viivitus (24 tundi)', 'Kuupäev ja kellaaeg ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' keskmine ',' DAY/288 ');}

3. samm: seadistage diagramm

Lisage Highchartsi JavaScripti fail HTML -faili pärast JQuery -faili:

Diagrammi seadistamiseks täitke funktsioon DisplayChart:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, diagramm: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, seeria: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {andmed: {}, nimi: {}}; options.series .nimi = andmed ["nimi"]; options.series .andmed = andmed ["andmed"]; } var diagramm = uus Highcharts. Chart (valikud); }

Samm: see on kõik! Valmis

Kui olete lõpetanud, laadige oma HTML brauserisse ja kontrollige diagrammi!

Kui soovite mõõtmisi saata, külastage palun meie õpetuste lehte või meie kogukonna foorumit!:)

Täisnäide: GitHub - lihtne diagramm