IoT গুরু ক্লাউড - সরল চার্ট উদাহরণ: 4 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

IoT গুরু ক্লাউড REST API এর মাধ্যমে একগুচ্ছ ব্যাকএন্ড পরিষেবা প্রদান করে এবং আপনি এই REST কলগুলিকে আপনার ওয়েব পেজে সহজেই সংহত করতে পারেন। হাইচার্টের সাহায্যে, আপনি কেবলমাত্র AJAX কল দিয়ে আপনার পরিমাপের চার্ট প্রদর্শন করতে পারেন।

ধাপ 1: একটি HTML পৃষ্ঠা তৈরি করুন

আপনার প্রিয় সম্পাদকের সাথে আপনাকে একটি খালি HTML ফাইল তৈরি করতে হবে:

IoT গুরু ক্লাউড - সহজ চার্ট উদাহরণ

এটি সংরক্ষণ করুন: simple -chart.html IoT Guru Cloud - সাধারণ চার্টের উদাহরণ

ধাপ 2: চার্ট ডেটার AJAX লোড

এইচটিএমএল ফাইলে আপনাকে JQuery এবং AJAX কল যোগ করতে হবে, এটি নির্দিষ্ট নোডের সিরিজের ডেটা এবং ক্ষেত্রের নাম লোড হবে: IoT গুরু ক্লাউড - সহজ চার্ট উদাহরণ

IoT গুরু ক্লাউড - সহজ চার্ট উদাহরণ ফাংশন 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 ঘন্টা)', 'তারিখ এবং সময় ',' মিনিট ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' গড় ',' DAY/288 ');}

ধাপ 3: চার্ট সেট আপ করুন

JQuery ফাইলের পর HTML ফাইলে Highcharts জাভাস্ক্রিপ্ট ফাইল যোগ করুন:

চার্ট সেট আপ করার জন্য ডিসপ্লেচার্ট ফাংশনের মূল অংশটি পূরণ করুন:

ফাংশন displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', শিরোনাম: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, সিরিজ: [{}]}; জন্য (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = data ["name"]; options.series .data = data ["data"]; } var চার্ট = নতুন Highcharts. Chart (অপশন); }

ধাপ 4: এটাই! সম্পন্ন

আপনি শেষ করেছেন, আপনার ব্রাউজারে আপনার HTML লোড করুন এবং চার্টটি দেখুন!

আপনি যদি পরিমাপ পাঠাতে চান, দয়া করে আমাদের টিউটোরিয়াল পৃষ্ঠা বা আমাদের কমিউনিটি ফোরামে যান!:)

সম্পূর্ণ উদাহরণ: GitHub - সাধারণ চার্ট