Membuat Grafik dengan Chart.js di JavaScript

Grafik merupakan sebuah unsur atau fitur yang paling menambah nilai jual sebuah aplikasi dengan adanya fitur yang menampilkan data dalam bentuk grafik sangat membantu pengguna dalam membaca jumlah persentase sebuah kumpulan data.

Banyak keuntungan dalam menggunakan grafik termasuk dapat membuat aplikasi yang kita buat menjadi lebih terlihat profesional,karena data yang awalnya hanya berupa angka bisa terlihat lebih visual apalagi dengan adanya animasi dan efek yang keren yang membuat tampilan grafik lebih terlihat menarik.

Namun yang pasti menjadi pertanyaan bagi teman-teman adalah, sulitkah membuat grafik ?

Jawabannya tidak, karena sekarang sudah ada banyak plugin javascript yang dapat membantu kita dalam membuat sebuah grafik, apalagi masing-masing plugin grafik mempunyai kelebihan dan kekurangannya masing-masing.

Cara membuat grafik pada aplikasi atau website sangatlah mudah. teman-teman berada pada artikel yang tepat. karena pada tutorial dalam artikel saya kali ini kita akan belajar cara membuat grafik dengan chart.js

 

Membuat Grafik dengan Chart.js

Teman-teman yang baru mendengar chart.js pasti bingung apa sih chart.js itu? Silahkan teman-teman simak penjelasan berikut tentang pengertian chart.js dan bagaimana cara membuat grafik dengan chart.js dengan mudah dan gratis tentunya.

Chart.js adalah salah satu plugin javascript yang dibuat untuk memudahkan atau membantu kita dalam membuat grafik dengan sangat mudah dan cepat. Ada banyak sekali pilihan jenis grafik yang bisa kita buat dengan chart.js diantaranya adalah grafik bar, line, pie dan banyak deh pokoknya.

Teman-teman bisa langsung melihat demo dari jenis-jenis atau model grafik yang bisa kita buat dengan chart.js di website si chart.js nya langsung

    

Oke langsung saja ya kita mulai tentang cara membuat grafik dengan chart.js

 

Cara Membuat Grafik dengan Chart.js

Pada tutorial ini kita akan membuat beberapa jenis contoh grafik dengan menggunakan chart.js. Langsung saja teman-teman download dulu chart.js nya di github resmi chart js nya langsung saja.

Pada saat tutorial ini dibuat, chartjs sudah sampai pada versi terbarunya yaitu versi v2.7.2.

Kali ini saya hanya mendownload chart.js nya saja. karena saya rasa kita belum membutuhkan package yang lainnya.

    

Setelah di download, extrak dan rename nama foldernya menjadi chartjs. Untuk apa kita rename? supaya lebih mudah kita hubungkan pada project kita. jadi gak perlu menulis sampai versi-versinya seperti v2.7.2 dan bla-bla hehe..

Oh ya karena pada contohnya ini saya hanya menggunakan HTML saja dan tidak menggunakan PHP. silahkan teman-teman sesuaikan dengan kebutuhan masing-masing saja.

Karena saya hanya menggunakan HTML, maka project nya bisa di buat di mana saja tidak perlu di dalam htdocs.Tapi, projectnya saya buat dalam folder htdocs/js karena agar rapih supaya tidak bingung jika membutuhkan referensi tentang javascript.

 

Selanjutnya buat sebuah file baru dengan nama chart.html

Pada file chart.html ini saya akan membuat sebuah contoh grafik menggunakan chart.js

Chart.html

Sebelum menjalankan script di atas jangan lupa untuk menghubungkan  file html kalian dengan chart.js yang  sudah kalian download tadi agar bisa muncul hasilnya seperti berikut ini:

  

Nah, sampai di sini teman-teman telah bisa membuat grafik dengan menggunakan chart.js. Selanjutnya akan kita bahas cara menampilkan data dari database dalam bentuk grafik seperti grafik di atas. Tapi, datanya bukan kita set secara manual seperti atas. Namun datanya akan kita ambil berdasarkan data pada database

Oke sekian dulu, terima kasih telah membaca tutorial Membuat Grafik Dengan Chart.js dalam artikel saya.Semoga bermanfaat.