IoT Guru Cloud - Contoh Bagan Sederhana: 4 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

IoT Guru Cloud menyediakan banyak layanan backend melalui REST API dan Anda dapat mengintegrasikan panggilan REST ini ke halaman web Anda dengan mudah. Dengan Highcharts, Anda dapat menampilkan grafik pengukuran Anda hanya dengan panggilan AJAX.

Langkah 1: Buat Halaman HTML

Anda perlu membuat file HTML kosong dengan editor favorit Anda:

IoT Guru Cloud - Contoh bagan sederhana

Simpan: simple-chart.html IoT Guru Cloud - Contoh bagan sederhana

Langkah 2: AJAX Memuat Data Bagan

Anda perlu menambahkan JQuery dan panggilan AJAX ke file HTML, itu akan memuat serangkaian data dari node dan nama bidang yang ditentukan: IoT Guru Cloud - Contoh bagan sederhana

IoT Guru Cloud - Contoh bagan sederhana fungsi loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/ pengukuran/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulasi, tipe data: "json", sukses: fungsi (data) { displayChart(target, titleText, xAxisText, yAxisText, granulation, data); } }); } function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { } $(document).ready(function () { loadData('graphAverage', 'Rata-rata delay kereta (24 jam)', 'Tanggal dan waktu ', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'rata-rata', 'HARI/288'); }

Langkah 3: Siapkan Bagan

Tambahkan file JavaScript Highcharts ke file HTML setelah file JQuery:

Isi isi fungsi displayChart untuk mengatur grafik:

function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { var options = { title: { text: titleText }, chart: { type: 'spline', renderTo: target, }, xAxis: { type: 'datetime ', judul: { teks: xAxisText }, gridLineWidth: 1, tickInterval: 3600 * 1000 }, yAxis: { judul: { teks: yAxisText } }, seri: [{}] }; for (var i = 0; i < data.length; i++) { options.series = {data: {}, name: {}}; options.series.nama = data["nama"]; options.series.data = data["data"]; } var chart = new Highcharts. Chart(options); }

Langkah 4: Itu Saja! Selesai

Anda selesai, muat HTML Anda di browser Anda dan periksa grafiknya!

Jika Anda ingin mengirim pengukuran, silakan kunjungi halaman Tutorial kami atau Forum Komunitas kami!:)

Contoh lengkap: GitHub - bagan sederhana