IoT Guru Bulud - Sadə Qrafik Nümunəsi: 4 Addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:45

IoT Guru Cloud, REST API vasitəsilə bir çox arxa xidmət təqdim edir və bu REST zənglərini veb səhifənizə asanlıqla inteqrasiya edə bilərsiniz. Highcharts ilə ölçmələrinizin cədvəllərini sadəcə AJAX zəngi ilə göstərə bilərsiniz.

Addım 1: HTML səhifəsi yaradın

Sevdiyiniz redaktorla boş bir HTML faylı yaratmalısınız:

IoT Guru Cloud - Sadə bir qrafik nümunəsi

Saxla: simple -chart.html IoT Guru Cloud - Sadə qrafik nümunəsi

Addım 2: AJAX Diaqram Verilərinin Yüklənməsi

HTML faylına JQuery və AJAX çağırışı əlavə etməlisiniz, göstərilən düyün və sahə adının məlumat seriyası yüklənəcək: IoT Guru Cloud - Sadə qrafik nümunəsi

IoT Guru Bulud - Sadə qrafik nümunəsi funksiyası loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ ölçü/loadByNodeId/' + nodeId +'/' + fieldName +'/' + qranulyasiya, dataType: "json", uğur: funksiya (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } funksiyası displayChart (hədəf, titleText, xAxisText, yAxisText, qranulyasiya, data) {} $ (sənəd).ready (funksiya () {loadData ('graphAverage', 'Qatarların orta gecikməsi (24 saat)', 'Tarix və vaxt) ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' orta ',' GÜN/288 ');}

Addım 3: Diaqramı qurun

JQuery faylından sonra Highcharts JavaScript faylını HTML faylına əlavə edin:

Diaqram qurmaq üçün displayChart funksiyasının gövdəsini doldurun:

displayChart funksiyası (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', başlıq: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, seriya: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, ad: {}}; options.series .name = data ["name"]; options.series .data = data ["data"]; } var chart = yeni Highcharts. Chart (seçimlər); }

Addım 4: Budur! Bitdi

Bitirdiniz, HTML -ni brauzerinizə yükləyin və cədvəli yoxlayın!

Ölçmələr göndərmək istəyirsinizsə, Dərsliklər səhifəmizi və ya İcma Forumumuzu ziyarət edin!:)

Tam nümunə: GitHub - sadə qrafik