IoT गुरु क्लाउड - सरल चार्ट उदाहरण: 4 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21

IoT गुरु क्लाउड REST API के माध्यम से बैकएंड सेवाओं का एक समूह प्रदान करता है और आप इन REST कॉल को अपने वेब पेज पर आसानी से एकीकृत कर सकते हैं। Highcharts के साथ, आप केवल AJAX कॉल के साथ अपने माप के चार्ट प्रदर्शित कर सकते हैं।

चरण 1: एक HTML पेज बनाएं

आपको अपने पसंदीदा संपादक के साथ एक खाली HTML फ़ाइल बनानी होगी:

IoT गुरु क्लाउड - सरल चार्ट उदाहरण

इसे सहेजें: simple-chart.html IoT गुरु क्लाउड - सरल चार्ट उदाहरण

चरण 2: चार्ट डेटा का AJAX लोड

आपको HTML फ़ाइल में JQuery और एक AJAX कॉल जोड़ने की आवश्यकता है, यह निर्दिष्ट नोड और फ़ील्ड नाम के डेटा की श्रृंखला को लोड करेगा: IoT गुरु क्लाउड - सरल चार्ट उदाहरण

IoT गुरु क्लाउड - सरल चार्ट उदाहरण फ़ंक्शन लोडडेटा (लक्ष्य, शीर्षक टेक्स्ट, xAxisText, yAxisText, nodeId, fieldName, granulation) {वापसी $.ajax ({प्रकार: "GET", url: 'https://api.iotguru.cloud/ माप/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulation, dataType: "json", Success: function (data) {displayChart(target, titleText, xAxisText, yAxisText, granulation, data); } }); } फ़ंक्शन डिस्प्ले चार्ट (लक्ष्य, शीर्षक टेक्स्ट, xAxisText, yAxisText, granulation, डेटा) { } $(दस्तावेज़)। ', 'मिनट', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'औसत', 'दिन/288'); }

चरण 3: चार्ट सेट करें

JQuery फ़ाइल के बाद HTML फ़ाइल में Highcharts JavaScript फ़ाइल जोड़ें:

चार्ट सेट करने के लिए डिस्प्ले चार्ट फ़ंक्शन का मुख्य भाग भरें:

फ़ंक्शन डिस्प्ले चार्ट (लक्ष्य, शीर्षक टेक्स्ट, xAxisText, yAxisText, granulation, डेटा) {var विकल्प = {शीर्षक: {पाठ: शीर्षक टेक्स्ट}, चार्ट: {प्रकार: 'स्पलाइन', रेंडर करने के लिए: लक्ष्य,}, xAxis: {प्रकार: 'डेटाटाइम ', शीर्षक: {पाठ: xAxisText}, ग्रिडलाइनविड्थ: 1, टिकइंटरवल: 3600 * 1000}, yAxis: {शीर्षक: {पाठ: yAxisText}}, श्रृंखला: [{}]}; के लिए (var i = 0; i < data.length; i++) {Options.series = {data: {}, name: {}}; विकल्प.श्रृंखला । नाम = डेटा ["नाम"]; विकल्प.श्रृंखला । डेटा = डेटा ["डेटा"]; } var चार्ट = नया हाईचार्ट्स। चार्ट (विकल्प); }

चरण 4: बस! किया हुआ

आप समाप्त कर चुके हैं, अपने ब्राउज़र में अपना HTML लोड करें और चार्ट की जांच करें!

यदि आप माप भेजना चाहते हैं, तो कृपया हमारे ट्यूटोरियल पृष्ठ या हमारे सामुदायिक मंच पर जाएँ!:)

पूरा उदाहरण: गिटहब - सरल चार्ट