IoT Guru Cloud - пример простой диаграммы: 4 шага

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

IoT Guru Cloud предоставляет множество серверных сервисов через REST API, и вы можете легко интегрировать эти REST-вызовы на свою веб-страницу. С помощью Highcharts вы можете отображать диаграммы своих измерений просто с помощью вызова AJAX.

Шаг 1. Создайте HTML-страницу

Вам нужно создать пустой HTML-файл с помощью вашего любимого редактора:

IoT Guru Cloud - простой пример диаграммы

Сохраните его: simple-chart.html IoT Guru Cloud - Пример простой диаграммы

Шаг 2: загрузка данных диаграммы AJAX

Вам нужно добавить JQuery и вызов AJAX в файл HTML, он загрузит серию данных указанного узла и имени поля: IoT Guru Cloud - Простой пример диаграммы

IoT Guru Cloud - Простой пример диаграммы, функция loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ измерение / 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', 'Средняя задержка поездов (24 часа)', 'Дата и время ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY / 288 ');}

Шаг 3. Настройте диаграмму

Добавьте файл JavaScript Highcharts в файл HTML после файла JQuery:

Заполните тело функции displayChart для настройки диаграммы:

функция 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 ["имя"]; options.series .data = data ["данные"]; } var chart = new Highcharts. Chart (параметры); }

Шаг 4: Вот и все! Выполнено

Вы закончили, загрузите HTML-код в свой браузер и проверьте диаграмму!

Если вы хотите отправить измерения, посетите нашу страницу с обучающими материалами или наш форум сообщества!:)

Полный пример: GitHub - простая диаграмма