[TIPS] Contoh Cara Membuat Grafik Standard HTML Sederhana

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 1Calon 2Calon 3Calon 4Calon 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

5 thoughts on “[TIPS] Contoh Cara Membuat Grafik Standard HTML Sederhana

  1. ini adalah bentuk dukungan kepada yang sedang belajar pemrograman,tentunya ini sangat baik,,,!saya haraap web ini bsa lebih menambah informasinya!

    1. 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 🙂

  2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *