IoT Guru Cloud - Eenvoudig grafiekvoorbeeld: 4 stappen

2025 Auteur: John Day | [email protected]. Laatst gewijzigd: 2025-01-23 15:01

De IoT Guru Cloud biedt een aantal backend-services via REST API en u kunt deze REST-aanroepen eenvoudig in uw webpagina integreren. Met Highcharts kunt u eenvoudig grafieken van uw meting weergeven met een AJAX-oproep.

Stap 1: Maak een HTML-pagina

U moet een leeg HTML-bestand maken met uw favoriete editor:

IoT Guru Cloud - Eenvoudig grafiekvoorbeeld

Bewaar het: simple-chart.html IoT Guru Cloud - Voorbeeld van een eenvoudig diagram

Stap 2: AJAX laden van kaartgegevens

U moet JQuery en een AJAX-aanroep aan het HTML-bestand toevoegen, het zal de reeks gegevens van het opgegeven knooppunt en de veldnaam laden: IoT Guru Cloud - Eenvoudig diagramvoorbeeld

IoT Guru Cloud - Eenvoudige grafiek voorbeeldfunctie loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/ Measurement/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulatie, dataType: "json", succes: function (data) { displayChart(target, titleText, xAxisText, yAxisText, granulation, data);} }); } function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { } $(document).ready(function () { loadData('graphAverage', 'Gemiddelde vertraging van treinen (24 uur)', 'Datum en tijd ', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'gemiddelde', 'DAG/288'); }

Stap 3: Stel de grafiek in

Voeg het Highcharts JavaScript-bestand toe aan het HTML-bestand na het JQuery-bestand:

Vul het lichaam van de displayChart-functie voor het instellen van de grafiek:

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

Stap 4: Dat is het! Gedaan

U bent klaar, laad uw HTML in uw browser en bekijk de grafiek!

Als je metingen wilt verzenden, bezoek dan onze Tutorials-pagina of ons Community Forum!:)

Volledig voorbeeld: GitHub - eenvoudig diagram