Pembuatan grafik ternyata tidak harus rumit dengan tools tertentu. Grafik masih bisa disiasati dengan menggunakan kombinasi teknik CSS dan HTML. Tentu saja tidak semua grafik dapat dibentuk, karena keterbatasan CSS dan HTML. Disini kita pelajari grafik yang mudah seperti grafik batang/bar, dimana seluruh value akan dibentuk dengan menggunakan Bar. Lihat contoh dibawah ini:
Calon 1 | |
---|---|
Calon 2 | |
Calon 3 | |
Calon 4 | |
Calon 5 |
Contoh Grafik Pemilihan Kepala Desa
Pembuatan grafik ini ternyata tidak sulit. Yaitu hanya dengan melakukan pembuatan elemen DIV yang diberi warna tertentu, dan diberi panjang tertentu, yang tentu saja panjangnya nanti akan menyesuaikan dari dalam tabel asal.
Sebagai contoh, apa yang terjadi apa bila kita membuat sintaks seperti demikian:
Calon 1 | |
---|---|
Calon 2 | |
Calon 3 | |
Calon 4 | |
Calon 5 |
Hasilnya tentu saja akan langsung seperti tabel di atas. Panjangnya batang akan mengikuti aturan width pada div yang bersangkutan. Grafik tersebut juga dapat kita kombinasikan dengan link href. Grafik tersebut dibuat dengan cara menempatkan sebuah elemen div yang berukuran panjang yang diatur dari database. Div tersebut juga harus rata kiri untuk dapat dibaca dengan jelas
Kita pun dapat membuat grafik dalam posisi vertikal. Hanya saja, karena tabel html memiliki karakter standard rata vertikal tengah, maka kita harus menambahkan valign=bottom
Sebagai contoh adalah sebagai berikut
Calon 1 | Calon 2 | Calon 3 | Calon 4 | Calon 5 |
---|
Hasilnya akan menjadi seperti ini:
Calon 1 | Calon 2 | Calon 3 | Calon 4 | Calon 5 |
---|
Nah ternyata cukup sederhana. Tinggal kita akhirnya dapat melakukan manipulasi angka tersebut dengan menggunakan PHP dan mengambil dari database server MySQL.
Untuk grafik lanjut berbasis image, dapat dilihat di :
https://blogit.bimosaurus.com/2012/04/21/contoh-cara-membuat-grafik-dengan-jpgraph-dengan-php-dan-mysql dan
https://blogit.bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php
ini adalah bentuk dukungan kepada yang sedang belajar pemrograman,tentunya ini sangat baik,,,!saya haraap web ini bsa lebih menambah informasinya!
Ini adalah kabar dan umpan balik yang baik yang semakin menambah semangat kami untuk terus berbagi.. Semoga kami konsisten dengan gerakan berbagi ini, dan semoga tetap bisa bermanfaat buat sesama 🙂
Terimakasih 🙂
Bagus nih idenya..
aku coba deh..
🙂 Kemudian silakan dikembangkan
selain menggunakan HTML dan CSS , kita juga bisa menggunakan kolaborasi antara PHP,MYQL,HTMl dan CSS,
jadi diagram yang kita buat bisa sedikit responsive, saya udah pernah coba dan ternyata berhasil,
hanya memanfaatkan heigth dan width dari css yang nilai heigth dan widthnya bisa kita ambil dari Database melalui PHP