Chmura IoT Guru - przykład prostego wykresu: 4 kroki

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

IoT Guru Cloud zapewnia szereg usług zaplecza za pośrednictwem interfejsu API REST i możesz łatwo zintegrować te wywołania REST ze swoją stroną internetową. Dzięki Highcharts możesz wyświetlać wykresy swojego pomiaru po prostu za pomocą wywołania AJAX.

Krok 1: Utwórz stronę HTML

Musisz utworzyć pusty plik HTML za pomocą swojego ulubionego edytora:

Chmura IoT Guru - prosty przykład wykresu

Zapisz to: simple-chart.html IoT Guru Cloud - prosty przykład wykresu

Krok 2: Ładowanie danych wykresu AJAX

Musisz dodać JQuery i wywołanie AJAX do pliku HTML, zostanie załadowany szereg danych określonego węzła i nazwy pola: IoT Guru Cloud - Prosty przykład wykresu

IoT Guru Cloud - Przykładowa prosta funkcja wykresu loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/ pomiar/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', 'Średnie opóźnienie pociągów (24 godziny)', 'Data i godzina ', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'średnia', 'DZIEŃ/288'); }

Krok 3: Skonfiguruj wykres

Dodaj plik JavaScript Highcharts do pliku HTML po pliku JQuery:

Wypełnij treść funkcji displayChart, aby skonfigurować wykres:

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.nazwa = dane["nazwa"]; options.series.data = dane["dane"]; } var chart = new Highcharts. Chart(opcje); }

Krok 4: To wszystko! Gotowe

Gotowe, załaduj kod HTML do przeglądarki i sprawdź wykres!

Jeśli chcesz wysłać pomiary, odwiedź naszą stronę z samouczkami lub nasze forum społeczności!:)

Pełny przykład: GitHub - prosty wykres