Membuat Graphic Chart di Web dengan ChartJS

chartjs

chartjs

Tutorial ini adalah bagian pertama dari 4 Tutorial. Tutorial lain yang merupakan kelanjutan dari tutorial ini bisa anda baca di link berikut :

  1. Mengenal ChartJS (artikel ini )
  2. Membuat Line Chart dengan ChartJS + PHP (Coming soon…)
  3. Membuat Bar Chart dengan ChartJS + PHP ( Coming soon…)
  4. Membuat Pie Chart dengan ChartJS + PHP (Coming soon ..)

Sekitar 3 tahun yang lalu saya membuat tutorial Membuat grafik Chart dengan Highcart dan PHP yang sampai hari ini tetap menjadi TOP Post di blog ini.  Sayangnya Highcart hanya membolehkan versi freenya untuk membuat aplikasi open source saja dan tidak diperbolehkan membuat aplikasi komersial kecuali membeli lisensinya yang untuk ukuran kantong indonesia mahal banget, bayangkan saja satu developer lisensinya sampai 590 USD atau sekitar 8 Juta dengan Kurs saat ini.

Untuk itulah saya akan membuat panduan baru dengan chartJS Library yang murni Open source berbasis teknologi HTML5 Canvas dengan Lisensi MIT . Lisensi ini membolehkan kita membuat aplikasi Free ataupun Komersial tanpa harus membayar lisensi.

ChartJS punya 6 Fitur utama yaitu :

  1. Mendukung 6 tipe chart yaitu line,bar, pie, donat, polar dan radar Chart
  2. Berbasis HTML5  Canvas sehingga tidak perlu plugin dibrowser
  3. Tidak membutuhkan library lain seperti jQuery . Ukuranya kecil cuma 11kb.
  4. Responsive, Graphic Chart bisa dilihat di smartphone, tablet ataupun desktop Browser.
  5. Modular, Anda bisa mengcustom javascript misalkan hanya untuk barchart saja sehingga ukuran library menjadi sangat kecil yang efeknya akan mempercepat loading halaman.
  6. Interaktif, berupa tooltip yang menampilkan informasi jumlah data di chart.

Dengan 6 kelebihan itu saya yakin Lebih dari cukup untuk kebutuhan pembuatan chart di website/WebApp yang anda buat. Tutorial selanjutnya akan membahas tentang membuat chart yang dikombinasikan dengan PHP dan MySQL. Untuk dokumentasi library ini dan contoh pembuatan chart static (tanpa database dan php) bisa anda lihat di http://www.chartjs.org/docs/.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

Tinggalin komentar dong!