IoT Guru Cloud - Einfaches Diagrammbeispiel - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Die IoT Guru Cloud bietet eine Reihe von Backend-Diensten über die REST-API und Sie können diese REST-Aufrufe einfach in Ihre Webseite integrieren. Mit Highcharts können Sie Diagramme Ihrer Messung einfach mit einem AJAX-Aufruf anzeigen.

Schritt 1: Erstellen Sie eine HTML-Seite

Sie müssen mit Ihrem bevorzugten Editor eine leere HTML-Datei erstellen:

IoT Guru Cloud - Einfaches Diagrammbeispiel

Speichern Sie es: simple-chart.html IoT Guru Cloud - Einfaches Diagrammbeispiel

Schritt 2: AJAX-Laden von Diagrammdaten

Sie müssen der HTML-Datei JQuery und einen AJAX-Aufruf hinzufügen, es wird die Datenreihe des angegebenen Knotens und Feldnamens geladen: IoT Guru Cloud - Einfaches Diagrammbeispiel

IoT Guru Cloud - Einfache Diagrammbeispielfunktion loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/ Measurement/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulation, dataType: "json", success: function (data) { displayChart(target, titleText, xAxisText, yAxisText, granulation, data); } }); } function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { } $(document).ready(function () { loadData('graphAverage', 'Durchschnittliche Verspätung der Züge (24 Stunden)', 'Datum und Uhrzeit ', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'durchschnittlich', 'TAG/288'); }

Schritt 3: Richten Sie das Diagramm ein

Fügen Sie die Highcharts-JavaScript-Datei zur HTML-Datei nach der JQuery-Datei hinzu:

Füllen Sie den Hauptteil der displayChart-Funktion zum Einrichten des Diagramms:

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

Schritt 4: Das war's! Fertig

Sie sind fertig, laden Sie Ihren HTML-Code in Ihren Browser und überprüfen Sie das Diagramm!

Wenn Sie Messungen senden möchten, besuchen Sie bitte unsere Tutorials-Seite oder unser Community-Forum!:)

Vollständiges Beispiel: GitHub - einfaches Diagramm