IoT Guru Cloud - Пример за проста диаграма: 4 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

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 +'/' + гранулиране, тип данни: "json", успех: функция (данни) {displayChart (target, titleText, xAxisText, yAxisText, гранулиране, данни);}}); } функция displayChart (target, titleText, xAxisText, yAxisText, гранулиране, данни) {} $ (document).ready (function () {loadData ('graphAverage', 'Средно закъснение на влаковете (24 часа)', 'Дата и час ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY/288 ');}

Стъпка 3: Настройте диаграмата

Добавете Highcharts JavaScript файла към HTML файла след JQuery файла:

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

функция displayChart (target, titleText, xAxisText, yAxisText, гранулиране, данни) {var options = {title: {text: titleText}, диаграма: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', заглавие: {текст: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {заглавие: {текст: yAxisText}}, серия: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {данни: {}, име: {}}; options.series . име = данни ["име"]; options.series .data = данни ["данни"]; } var chart = нови Highcharts. Chart (опции); }

Стъпка 4: Това е! Свършен

Готови сте, заредете своя HTML в браузъра си и проверете диаграмата!

Ако искате да изпратите измервания, моля, посетете нашата страница с уроци или нашия форум на общността!:)

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