IoT Guru Cloud - jednoduchý graf Príklad: 4 kroky

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

IoT Guru Cloud poskytuje množstvo backendových služieb prostredníctvom REST API a tieto REST volania môžete jednoducho integrovať na svoju webovú stránku. S Highcharts môžete zobrazovať grafy svojich meraní jednoducho pomocou hovoru AJAX.

Krok 1: Vytvorte stránku HTML

Musíte vytvoriť prázdny súbor HTML pomocou svojho obľúbeného editora:

IoT Guru Cloud - jednoduchý príklad grafu

Uložte to: simple -chart.html IoT Guru Cloud - jednoduchý príklad grafu

Krok 2: Načítanie údajov grafu AJAX

Do súboru HTML musíte pridať JQuery a volanie AJAX, bude to načítať sériu údajov zadaného názvu uzla a poľa: IoT Guru Cloud - jednoduchý príklad grafu

IoT Guru Cloud - jednoduchý príklad funkcie diagramu loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ measurement/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulácia, dataType: "json", úspech: funkcia (údaje) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Priemerné meškanie vlakov (24 hodín)', 'Dátum a čas ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY/288 ');}

Krok 3: Nastavte graf

Pridajte súbor JavaScript Highcharts do súboru HTML za súbor JQuery:

Na vytvorenie grafu vyplňte telo funkcie displayChart:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, séria: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = údaje ["meno"]; options.series .data = údaje ["údaje"]; } var chart = nové Highcharts. Chart (možnosti); }

Krok 4: To je všetko! Hotový

Ste hotoví, načítajte si HTML vo svojom prehliadači a skontrolujte tabuľku!

Ak chcete odoslať merania, navštívte našu stránku Návody alebo fórum komunity!:)

Úplný príklad: GitHub - jednoduchý graf