IoT Guru Cloud - Simple Chart Eksempel: 4 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

IoT Guru Cloud giver en masse backend -tjenester via REST API, og du kan nemt integrere disse REST -opkald på din webside. Med Highcharts kan du blot vise diagrammer over din måling med et AJAX -opkald.

Trin 1: Opret en HTML -side

Du skal oprette en tom HTML -fil med din foretrukne editor:

IoT Guru Cloud - Enkelt diagrameksempel

Gem det: simple -chart.html IoT Guru Cloud - enkelt diagrameksempel

Trin 2: AJAX -belastning af diagramdata

Du skal tilføje JQuery og et AJAX -opkald til HTML -filen, det indlæser dataserien for den angivne knude og feltnavn: IoT Guru Cloud - Enkelt diagrameksempel

IoT Guru Cloud - Simpel diagrameksempel funktion loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ måling/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulation, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } funktion displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (dokument).ready (funktion () {loadData ('graphAverage', 'Gennemsnitlig forsinkelse af tog (24 timer)', 'Dato og tid ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' gennemsnit ',' DAG/288 ');}

Trin 3: Opsæt diagrammet

Føj Highcharts JavaScript -filen til HTML -filen efter JQuery -filen:

Fyld brødteksten i displayChart -funktionen til opsætning af diagrammet:

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

Trin 4: Det er det! Færdig

Du er færdig, indlæse din HTML i din browser og tjek diagrammet!

Hvis du vil sende målinger, kan du besøge vores vejledningsside eller vores fællesskabsforum!:)

Fuldstændigt eksempel: GitHub - simpelt diagram