Cloud IoT Guru: exemple de gràfic simple: 4 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

El IoT Guru Cloud proporciona una gran quantitat de serveis de backend a través de l'API REST i podeu integrar aquestes trucades REST a la vostra pàgina web fàcilment. Amb Highcharts, podeu mostrar gràfics de la vostra mesura simplement amb una trucada AJAX.

Pas 1: creeu una pàgina HTML

Heu de crear un fitxer HTML buit amb el vostre editor favorit:

Cloud IoT Guru: exemple de gràfic simple

Deseu-lo: simple-chart.html IoT Guru Cloud: exemple de gràfic simple

Pas 2: càrrega AJAX de dades de gràfics

Cal afegir JQuery i una trucada AJAX al fitxer HTML, carregarà la sèrie de dades del node especificat i el nom del camp: IoT Guru Cloud: exemple de gràfic simple

Cloud IoT Guru: exemple de gràfic simple funció loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ mesures / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulació, dataType: "json", èxit: funció (dades) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document). Ready (function () {loadData ('graphAverage', 'Retard mitjà dels trens (24 hores)', 'Data i hora ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY / 288 ');}

Pas 3: configureu el gràfic

Afegiu el fitxer JavaScript Highcharts al fitxer HTML després del fitxer JQuery:

Empleneu el cos de la funció displayChart per configurar el gràfic:

funció 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}}, series: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, nom: {}}; options.series .name = dades ["nom"]; options.series .data = dades ["dades"]; } var chart = new Highcharts. Chart (opcions); }

Pas 4: Això és tot! Fet

Ja heu acabat, carregueu el vostre HTML al navegador i consulteu el gràfic.

Si voleu enviar mesures, visiteu la nostra pàgina de tutorials o el nostre fòrum de la comunitat.:)

Exemple complet: GitHub: gràfic simple