Obsah:
2025 Autor: John Day | [email protected]. Naposledy zmenené: 2025-01-23 15:05
IoT Guru Cloud poskytuje množstvo backendových služieb prostredníctvom REST API a tieto REST volania môžete jednoducho integrovať na svoju webovú stránku. S Highcharts môžete zobrazovať grafy svojich meraní jednoducho pomocou hovoru AJAX.
Krok 1: Vytvorte stránku HTML
Musíte vytvoriť prázdny súbor HTML pomocou svojho obľúbeného editora:
IoT Guru Cloud - jednoduchý príklad grafu
Uložte to: simple -chart.html IoT Guru Cloud - jednoduchý príklad grafu
Krok 2: Načítanie údajov grafu AJAX
Do súboru HTML musíte pridať JQuery a volanie AJAX, bude to načítať sériu údajov zadaného názvu uzla a poľa: IoT Guru Cloud - jednoduchý príklad grafu
IoT Guru Cloud - jednoduchý príklad funkcie diagramu loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ measurement/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulácia, dataType: "json", úspech: funkcia (údaje) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Priemerné meškanie vlakov (24 hodín)', 'Dátum a čas ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY/288 ');}
Krok 3: Nastavte graf
Pridajte súbor JavaScript Highcharts do súboru HTML za súbor JQuery:
Na vytvorenie grafu vyplňte telo funkcie displayChart:
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}}, séria: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = údaje ["meno"]; options.series .data = údaje ["údaje"]; } var chart = nové Highcharts. Chart (možnosti); }
Krok 4: To je všetko! Hotový
Ste hotoví, načítajte si HTML vo svojom prehliadači a skontrolujte tabuľku!
Ak chcete odoslať merania, navštívte našu stránku Návody alebo fórum komunity!:)
Úplný príklad: GitHub - jednoduchý graf
Odporúča:
Tranzistorový stĺpcový graf LED: 4 kroky
Tranzistorový stĺpcový graf LED: Tento článok ukazuje jedinečný a kontroverzný spôsob vytvárania stĺpcového grafu LED. Tento obvod potrebuje striedavý signál s vysokou amplitúdou. Môžete skúsiť pripojiť zosilňovač triedy D. Tento obvod bol navrhnutý a publikovaný pred mnohými rokmi na základe
Moderný a nový a jednoduchší príklad skrinky s maticovou klávesnicou Arduino 4x4: 3 kroky
Moderný a nový a jednoduchší príklad skrinky s maticovou klávesnicou Arduino 4x4: Ďalší príklad použitia matice LCD klávesnice 4x4 s obvodom I2C
Zaznamenajte údaje a vytvorte graf online pomocou NodeMCU, MySQL, PHP a Chartjs.org: 4 kroky
Zaznamenávajte údaje a vykreslite graf online pomocou NodeMCU, MySQL, PHP a Chartjs.org: Tento návod popisuje, ako môžeme použiť dosku Node MCU na zhromažďovanie údajov z viacerých senzorov, odosielanie týchto údajov do hosteného súboru PHP, ktorý potom údaje pridá do databázu MySQL. Údaje je potom možné zobraziť online ako graf pomocou programu chart.js.A ba
NodeMCU - MQTT Základný príklad: 4 kroky
NodeMCU - MQTT Základný príklad: Táto lekcia ukáže základné použitie protokolu MQTT na doske NodeMCU. Tu použijeme MQTTBox ako klienta MQTT a NodeMCU použijeme na dokončenie nasledujúcich operácií: Publikovanie „ahoj sveta“k téme „ outTopic “každé dve sekundy. Subscr
Teplota HRV na OpenHAB prostredníctvom ESP8266 (príklad sériového kódu!): 3 kroky
Teplota HRV na OpenHAB cez ESP8266 (príklad sériového kódu!): HRV - Bezdrôtový na OpenHAB Tento návod je špecifický pre tých, ktorí majú systém HRV (recirkulácia s vykurovaním) - hoci sú súčasťou obvodovej dosky, konfigurácia openhab alebo kód Arduino (napríklad čítanie Sériové údaje TTL) môžu byť h