Komunikasi-6: Menampilkan Grafik Chart Diagram Data IoT ESP8266 dengan ChartJS

Dipublikasikan oleh Admin pada

Membuat Grafik Chart berdasarkan Data IOT

Pada tulisan sebelumnya kita sudah membuat program untuk mengirimkan data dari Arduino + Modul ESP8266 ke sebuah web server IoT. Data yang tersimpan tersebut tentu tidak akan bermanfaat kalau tidak dipresentasikan untuk dibaca atau dianalisa. Oleh karena itu pada tulisan kali ini kita akan diberikan contoh sederhana cara menampilkan data IoT di server dalam bentuk grafik atau chart atau diagram.

Grafik yang akan dibuat adalah web based, dengan begitu bisa dibuka dimana saja menggunakan browser Internet. Tool yang akan digunakan untuk membuat grafik adalah ChartJS.

ChartJS adalah sebuah library Javascript untuk membuat grafik atau chart atau diagram di web. Penulis memilih ini karena kemudahan dan kesederhanaan cara menggunakan nya. Selain itu hasil grafiknya cukup bagus.

Contoh Script HTML Membuat Grafik data IoT

Pada contoh tulisan ini kita akan menampilkan grafik suhu berdasarkan data yang dibaca dari server Iot generik , keyword yang akan digunakan adalah coba

Ini adalah script yang terdiri dari sebuah file .html saja. Sangat simpel bukan?

Demo untuk script ini bisa dilihat di halaman: http://www.komputronika.com/iot/demo/chart.html

Tampilan nya adalah seperti ini:

Chart Grafik Data IoT ESP8266 Arduino

Contoh di atas menggunakan jenis grafik atau diagram Line Chart. Kalau pembaca ingin menampilkan grafik jenis lain, silahkan membaca contoh-contoh yang disediakan oleh ChartJS. Selamat mencoba dan berkarya.

Kategori: Android