Orodha ya maudhui:
- Hatua ya 1: Unda Ukurasa wa HTML
- Hatua ya 2: Mzigo wa AJAX wa Takwimu za Chati
- Hatua ya 3: Sanidi Chati
- Hatua ya 4: Hiyo ndio! Imekamilika
Video: Cloud ya IoT Guru - Mfano rahisi wa Chati: Hatua 4
2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:51
Cloud ya IoT inatoa rundo la huduma za backend kupitia REST API na unaweza kujumuisha simu hizi za REST kwa ukurasa wako wa wavuti kwa urahisi. Na Highcharts, unaweza kuonyesha chati za kipimo chako tu na simu ya AJAX.
Hatua ya 1: Unda Ukurasa wa HTML
Unahitaji kuunda faili tupu ya HTML na mhariri uupendao:
Cloud ya IoT Guru - Mfano rahisi wa chati
Ihifadhi: rahisi-chati.html IoT Guru Cloud - Mfano rahisi wa chati
Hatua ya 2: Mzigo wa AJAX wa Takwimu za Chati
Unahitaji kuongeza JQuery na simu ya AJAX kwenye faili ya HTML, itapakia safu ya data ya nodi maalum na jina la uwanja: IoT Guru Cloud - Mfano rahisi wa chati
Cloud ya IoT Guru - Mfano rahisi wa chati kaziData (lengo, kichwaText, xAxisText, yAxisText, nodeId, fieldName, granulation) {kurudi $.ajax ({aina: "GET", url: 'https://api.iotguru.cloud/ kipimo / mzigoByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulation, dataType: "json", mafanikio: kazi (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); Chati ya kazi ya kuonyesha (lengo, kichwa cha maandishi, xAxisText, yAxisText, granulation, data) {} $ (hati) tayari (kazi () {loadData ('graphA wastani', 'Wastani wa kuchelewesha treni (masaa 24)', 'Tarehe na saa ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' wastani ',' SIKU / 288 ');}
Hatua ya 3: Sanidi Chati
Ongeza faili ya Highcharts JavaScript kwenye faili ya HTML baada ya faili ya JQuery:
Jaza mwili wa onyesho la chati ya kuonyesha kwa kuanzisha chati:
Chart ya kazi ', kichwa: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, mfululizo: [{}]}; kwa (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; chaguzi.series .name = data ["jina"]; chaguzi. huduma .data = data ["data"]; } var chart = Highcharts mpya. Chati (chaguzi); }
Hatua ya 4: Hiyo ndio! Imekamilika
Umemaliza, pakia HTML yako kwenye kivinjari chako na uangalie chati!
Ikiwa unataka kutuma vipimo, tafadhali tembelea ukurasa wetu wa Mafunzo au Jukwaa letu la Jumuiya!:)
Mfano kamili: GitHub - chati rahisi
Ilipendekeza:
Kuangalia data ya sensorer isiyotumia waya Kutumia Chati za Google: Hatua 6
Kuangalia data ya sensorer isiyotumia waya Kutumia Chati za Google: Uchambuzi wa utabiri wa mashine ni muhimu sana ili kupunguza wakati wa mashine. Kuangalia mara kwa mara husaidia katika kuongeza wakati wa kazi wa mashine na kwa hivyo huongeza uvumilivu wa makosa. Utetemeshi wa wireless na hali ya joto
Njia ya Haraka na Rahisi ya Kubadilisha Skrini Yako ya Kufuli kwa Hatua 6 Rahisi (Windows 8-10): Hatua 7
Njia ya Haraka na Rahisi ya Kubadilisha Skrini Yako ya Kufuli kwa Hatua 6 Rahisi (Windows 8-10): Unataka kubadilisha vitu kwenye kompyuta yako ndogo au PC? Unataka mabadiliko katika mazingira yako? Fuata hatua hizi za haraka na rahisi kufanikiwa kubinafsisha skrini yako ya kufunga kompyuta
DIY MusiLED, Muziki uliosawazishwa LEDs na Bonyeza mara moja Windows & Linux Maombi (32-bit & 64-bit). Rahisi kujirudia, Rahisi Kutumia, Rahisi kwa Port: 3 Hatua
DIY MusiLED, Muziki uliosawazishwa LEDs na Bonyeza mara moja Windows & Linux Maombi (32-bit & 64-bit). Rahisi kujirudia, Rahisi Kutumia, Rahisi Bandari. Mradi huu utakusaidia kuunganisha LEDs 18 (6 Nyekundu + 6 Bluu + 6 Njano) kwa Bodi yako ya Arduino na uchanganue ishara za wakati halisi wa Kompyuta yako na uzipeleke kwa taa za taa kuziwasha kulingana na athari za kipigo (Mtego, Kofia ya Juu, Kick)
NodeMCU ya ESP8266 Pamoja na Vipimo na Chati ya BME280: Hatua 5
ESP8266 NodeMCU Pamoja na Vipimo na Chati ya BME280: Vipimo vya kupendeza na Chati kwa bodi yako ya Uendelezaji wa NodeMCU ya ESP8266 na BME280 Joto, unyevu na sensor ya Shinikizo. Thingspeak itahifadhi data zako zote kwenye wingu kwa kurudishwa wakati wowote kwa miaka (kwa matumaini) ijayo. Vipimo na chati
Kuanza Kupanga na Chati ya Mtiririko: Hatua 7
Kuanza Kupanga na Chati ya Mtiririko: Kuanza kutumia vidhibiti vidogo vya PIC kwa miradi yako? ni muhimu sana lakini inasikitisha sana wakati programu yako haifanyi kazi. Hii ni njia moja ya kupanga maoni yako kwa kuchora chati ya mtiririko. Hii ndio njia mara nyingi wataalamu wa programu