Hallo sahabat Dumetschool ,pada kesempatan kali ini saya akan membahas tentang Bar Chart merupakan sebuah grapik berbentuk balok yang menampilkan sebuah data dengan chart secara Vertikal atau Horisontal. Biasanya dibuat untuk memberikan perbandingan agar mudah dipahami dalam  membaca sebuah data.Membuat tampilan chart bisa saja berbentuk lingkaran, garis, batang atau bentuk lainya, dalam kasus ini saya akan menunjukan cara membuat bar chart dengan HTML CSS dan JQUERY. Baiklah sahabat langsung saja ikuti langkah-langkah pembuatannya sebagai berikut :

Langkah Yang pertama membuat struktur HTML terlebih dahulu dengan script dibawah ini:

script diatas membuat tampilan yang menunjukan sebuah diagram batang yang berisi nilai persentase (%).

Langkah berikutnya sahabat siapkan sebuah library JQuery :

dan Script dari javascript seperti dibawah ini :

pada script diatas ada function barChart() yang digunakan untuk menentukan lebar sesuai value atau nilai presentase yang sudah ditentukan, dan lihat terdapat script baris pertamabarChart() , document.ready dan window.resize

Langkah berikutnya ditambahkan style CSS seperti dibawah ini:

Jika sudah semua script diketikan langsung saja jalankan pada browser masing-masing maka tampilanya akan seperti dibawah ini:

1-cara membuat bar chart dengan html css dan jquery

 

 

 

 

 

Demikian pembahasan artikel ini tentang cara membuat bar chart dengan HTML CSS dan JQUERY, semoga bermanfaat dan selamat mencoba.

terima kasih