Membuat Chart Sederhana Menggunakan CSS

Membuat Dynamic Grafic chart menggunakan CSS sangatlah mudah. Pada kesempatan kali ini, saya akan memberikan tutorial mengenai cara membuat Dynamic Grafic Chart sederhana menggunakan CSS. Masukkan style css berikut ke html Anda (atau menambahkannya ke CSS yang ada):

Pertama, kita membuat sebuah container yang akan menampung semua data chart nya. Jumlah data  dapat disesuaikan dengan kebutuhan Anda, untuk tutorial ini karena saya akan menentukan jumlah data berdasarkan persentase.

 



Mozilla

55%



IE

30%



Safari

22%



Opera

20%

Berikut gambar gradient nya :

Gradient image

Sayangnya, rounded border tidak bekerja di IE, tetapi tanpa IE pun tidak masalah kan :)