IoT Guru Cloud - Eenvoudige grafiekvoorbeeld: 4 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

Die IoT Guru Cloud bied 'n klomp backend -dienste via die REST API en u kan hierdie REST -oproepe maklik op u webwerf integreer. Met Highcharts kan u u metings eenvoudig met 'n AJAX -oproep vertoon.

Stap 1: Skep 'n HTML -bladsy

U moet 'n leë HTML -lêer met u gunsteling redakteur skep:

IoT Guru Cloud - Eenvoudige grafiekvoorbeeld

Stoor dit: simple -chart.html IoT Guru Cloud - Eenvoudige grafiekvoorbeeld

Stap 2: AJAX -laai grafiekdata

U moet JQuery en 'n AJAX -oproep by die HTML -lêer voeg, dit laai die reeks data van die gespesifiseerde node en veldnaam: IoT Guru Cloud - Eenvoudige grafiekvoorbeeld

IoT Guru Cloud - Eenvoudige grafiekvoorbeeld funksie loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ meting/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulasie, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } funksie displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Gemiddelde vertraging van treine (24 uur)', 'Datum en tyd' ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' gemiddeld ',' DAG/288 ');}

Stap 3: Stel die grafiek op

Voeg die Highcharts JavaScript -lêer by die HTML -lêer na die JQuery -lêer:

Vul die liggaam van die displayChart -funksie in vir die opstel van die grafiek:

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

Stap 4: Dit is dit! Klaar

U is klaar, laai u HTML in u blaaier en kyk na die grafiek!

Besoek ons tutoriaalbladsy of ons gemeenskapsforum as u metings wil stuur!:)

Volledige voorbeeld: GitHub - eenvoudige grafiek