IoT Guru Cloud - Primjer jednostavnog grafikona: 4 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:35

IoT Guru Cloud nudi hrpu pozadinskih usluga putem REST API -ja, a ove REST pozive možete lako integrirati na svoju web stranicu. Uz Highcharts možete jednostavno prikazati grafikone svojih mjerenja pomoću AJAX poziva.

Korak 1: Izradite HTML stranicu

Morate stvoriti praznu HTML datoteku s vašim omiljenim uređivačem:

IoT Guru Cloud - jednostavan primjer grafikona

Spremite: simple -chart.html IoT Guru oblak - jednostavan primjer grafikona

Korak 2: AJAX učitavanje podataka grafikona

Morate dodati JQuery i AJAX poziv u HTML datoteku, učitat će se niz podataka navedenog čvora i naziva polja: IoT Guru Cloud - jednostavan primjer grafikona

IoT Guru Cloud - Primjer jednostavne sheme funkcije loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ mjerenje/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulacija, dataType: "json", uspjeh: funkcija (podaci) {displayChart (target, titleText, xAxisText, yAxisText, granulacija, podaci);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Prosječno kašnjenje vlakova (24 sata)', 'Datum i vrijeme ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' prosječno ',' DAN/288 ');}

Korak 3: Postavite grafikon

Dodajte Highcharts JavaScript datoteku u HTML datoteku nakon JQuery datoteke:

Ispunite tijelo funkcije displayChart za postavljanje grafikona:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, grafikon: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', naslov: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {naslov: {text: yAxisText}}, serija: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = data ["name"]; options.series .data = podaci ["podaci"]; } var chart = novi Highcharts. Chart (opcije); }

Korak 4: To je to! Gotovo

Završili ste, učitajte HTML u preglednik i provjerite grafikon!

Ako želite poslati mjerenja, posjetite našu stranicu s vodičima ili naš forum zajednice!:)

Potpuni primjer: GitHub - jednostavan grafikon