IoT Guru Cloud - דוגמה פשוטה לתרשים: 4 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:14

ענן IoT Guru מספק חבורה של שירותי backend באמצעות REST API ותוכל לשלב את שיחות REST האלה בקלות בדף האינטרנט שלך. בעזרת Highcharts תוכל להציג תרשימים של המדידה שלך פשוט באמצעות שיחת AJAX.

שלב 1: צור דף HTML

עליך ליצור קובץ HTML ריק עם העורך המועדף עליך:

IoT Guru Cloud - דוגמה פשוטה לתרשים

שמור אותו: simple -chart.html ענן IoT Guru - דוגמה פשוטה לתרשים

שלב 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 ',' ממוצע ',' DAY/288 ');}

שלב 3: הגדר את התרשים

הוסף את קובץ ה- JavaScript של Highcharts לקובץ ה- HTML לאחר קובץ JQuery:

מלא את גוף הפונקציה displayChart להגדרת התרשים:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, תרשים: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, סדרה: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = data ["שם"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (אפשרויות); }

שלב 4: זהו! בוצע

סיימת, טען את ה- HTML בדפדפן שלך ובדוק את התרשים!

אם אתה רוצה לשלוח מדידות, בקר בדף ההדרכות שלנו או בפורום הקהילה שלנו!:)

דוגמה מלאה: GitHub - תרשים פשוט