• Home
  • /
  • PHP
  • /
  • Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS
PHP

Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS

 

Seperti yang saya janjikan pada status di Twitter maupun di Facebook bahwa saya berusaha akan menulis artikel tentang cara membuat grafik statistik dengan PHP dan CSS. Dan kini.. janji sudah terwujud.

Untuk membuat grafik chart, sebenarnya sudah banyak sekali package/library yang tersedia baik free maupun bayar. Salah satunya yang free adalah JpGraph. Cara penggunaan JpGraph ini pernah saya bahas sebelumnya, atau Anda bisa download tutorialnya di sini. Namun, untuk menjalankan library-library tersebut harus didukung oleh library yang lain juga misalnya GD library. Tanpa library tersebut, maka mustahil library grafik yang Anda peroleh dapat dijalankan. Di samping itu kita masih agak sedikit repot dengan cara penggunaannya, karena setiap library grafik berbeda penggunaannya.

Nah.. kini Anda tak perlu repot lagi untuk membuat grafik chart karena saya akan memberikan tutorial cara membuat grafik statistik hanya dengan perintah PHP sederhana dan ditunjang oleh CSS (Cascade Style Sheet). Memang sih.. untuk tampilan tidak semewah kalo kita menggunakan JpGraph atau yang lain, tapi paling tidak.. representasi grafiknya bisa dibaca dengan mudah dan bisa membuat keren website Anda 🙂

OK.. untuk studi kasus kali ini, saya akan menerapkan hal ini untuk representasi data mahasiswa berdasarkan jenis kelaminnya. Andaikan kita memiliki tabel database dan datanya sebagai berikut:

CREATE TABLE `mhs` (
  `nim` varchar(10),
  `nama` varchar(10),
  `jenisKelamin` varchar(10),
  PRIMARY KEY  (`nim`)
);

INSERT INTO `mhs` VALUES ('A001', 'A', 'LAKI-LAKI');
INSERT INTO `mhs` VALUES ('A002', 'B', 'LAKI-LAKI');
INSERT INTO `mhs` VALUES ('A003', 'C', 'LAKI-LAKI');
INSERT INTO `mhs` VALUES ('A004', 'D', 'PEREMPUAN');
INSERT INTO `mhs` VALUES ('A005', 'E', 'LAKI-LAKI');

Untuk outputnya, kita nanti akan berusaha membuat script yang menampilkan grafik seperti di bawah ini

Grafik dengan PHP dan CSS

Perhatikan gambar di atas, bahwa ketika kita dekatkan mouse ke grafik batangnya maka akan muncul keterangan data statistiknya. Efek tersebut kita buat tanpa menggunakan script apapun, kecuali hanya CSS doang. Simpel tapi menarik bukan?

Trus.. gimana ide dasar membuat grafiknya? terutama membuat grafik batangnya? Dalam hal ini grafik batang kita buat menggunakan CSS sedangkan panjang pendeknya grafik batang tersebut tergantung jumlah data yang kita hitung menggunakan script PHP.

Untuk membuat sebuah batang dengan CSS, kita cukup membuat tag seperti ini:


<div style="height: 10px; width: 10%; background-color: red;" title="..."></div>

Atribut ‘height’ digunakan untuk mengatur lebar dari batang (dalam hal ini menggunakan satuan pixel). Selanjutnya ‘width’ untuk menentukan panjang batang. Anda bisa menggunakan satuan pixel maupun prosentase. Bila Anda menggunakan prosentase maka prosentase yang dimaksud adalah relatif terhadap panjang jendela browser. Misalkan diberikan ‘width: 10%’ maka panjang batang adalah 10% dari panjang jendela browser. Sedangkan atribut ‘background-color’ untuk mengatur warna batang, dan ‘title’ untuk memberikan title dari batang tersebut. Efek pemberian ‘title’ tampak seperti pada gambar output di atas yaitu akan muncul keterangan (tool tips) ketika mouse mengenai batang tersebut.

Nah… untuk selanjutnya kita hanya bermain-main pada atribut ‘width’ dan ‘title’ untuk membuat tampilan output seperti di atas. Kedua atribut ini nanti kita buat dinamis tergantung jumlah datanya.

Trus.. untuk mengatur panjang pendeknya batang gimana caranya? caranya adalah dengan menggunakan skala. Wah.. ada matematikanya ya? jelas donk… wah mentang-mentang yang nulis artikel ini orang matematika ya? he.. 3x nggak juga, karena kebetulan topik ini ada sangkut pautnya dengan matematika 🙂

Nah.. bagaimana penggunaan skalanya? OK kita misalkan kita tentukan panjang grafik maksimum adalah 30% dari panjang jendela browser. Karena 30% ini panjang maksimum, maka kejadian ini akan terjadi ketika ada item data yang jumlahnya 100%. Sebagai contoh misalkan ada 10 mahasiswa, dan semuanya pria (prosentase pria 100%). Dengan demikian grafik batang untuk pria ini panjangnya adalah 30%. Nah.. dari asumsi ini, kita tinggal atur skalanya berarti untuk item data sejumlah n% maka panjang batangnya adalah (n*30/100)%. OK, paham ya idenya?

Dengan demikian, berdasarkan ide di atas berarti sebelum mulai membuat grafiknya, kita harus dapatkan dulu data prosentase setiap item data, dalam hal ini jumlah laki-lakinya berapa prosen begitu pula perempuannya. Setelah jumlah prosentase masing-masing diketahui, barulah kita gunakan untuk mengatur panjang grafik batang menggunakan skala di atas.

So.. script untuk membuat grafik statistik mahasiswa berdasarkan jenis kelamin kita buat sbb:

<?php

// koneksi ke mysql
mysql_connect("dbhost", "dbuser", "dbpass");
mysql_select_db("dbname");

// mencari jumlah laki-laki dari database
$query = "SELECT count(*) AS jumCowok FROM mhs WHERE jenisKelamin = 'LAKI-LAKI'";
$hasil = mysql_query($query);
$data  = mysql_fetch_array($hasil);
$jumCowok = $data['jumCowok'];

// mencari jumlah perempuan dari database
$query = "SELECT count(*) AS jumCewek FROM mhs WHERE jenisKelamin = 'PEREMPUAN'";
$hasil = mysql_query($query);
$data  = mysql_fetch_array($hasil);
$jumCewek = $data['jumCewek'];

// menghitung total mahasiswa
$total = $jumCowok + $jumCewek;

// menghitung prosentase laki-laki dan perempuan
$prosenCowok = $jumCowok/$total * 100;
$prosenCewek = $jumCewek/$total * 100;

// menentukan panjang grafik batang berdasarkan prosentase
$panjangGrafikCowok = $prosenCowok * 30 / 100;
$panjangGrafikCewek = $prosenCewek * 30 / 100;

?>

<h2>Statistik Mahasiswa Berdasarkan Jenis Kelamin</h2>

<p><b>Laki-laki</b> (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCowok; ?>%; background-color: red;" title="Laki-laki (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%)"></div></p>

<p><b>Perempuan</b> (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCewek; ?>%; background-color: red;" title="Perempuan (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%)"></div></p>


Nah.. mudah bukan membuatnya?

Oya.. satu lagi yang perlu saya tambahkan. Lantas.. bagaimana bila kejadiannya keseluruhan mahasiswanya laki-laki atau perempuan? pastilah nantinya ada prosentase yang 0% dan akibatnya grafik batangnya tidak muncul karena width nya ‘0%’. Sebenarnya tidak apa-apa sih, namun.. kok kayaknya kurang seru. Meskipun prosentasenya 0%, tapi paling tidak kita munculkan sedikit grafiknya meskipun hanya dengan panjang 1%. Untuk membuat ini, kita harus tambahkan statement IF pada script di atas yaitu pada bagian penentuan panjang grafiknya, sehingga pada bagian tersebut menjadi:

if ($prosenCowok == 0) $panjangGrafikCowok = 1;
else $panjangGrafikCowok = $prosenCowok * 30 / 100;

if ($prosenCewek == 0) $panjangGrafikCewek = 1;
else $panjangGrafikCewek = $prosenCewek * 30 / 100;

OK?? begitu tutorial yang saya berikan ini, mudah-mudahan ada manfaatnya. Artikel ini terinsipirasi oleh plugin polling di WordPress yang saya pasang di blog ini yang menggunakan ide di atas.

 

Bagikan artikel ini jika bermanfaat !

Assalaamu'alaikum.. aktivitas keseharian saya mengajar di Universitas Sebelas Maret, dengan matakuliah pemrograman dan basis data. Adapun bidang penelitian saya tentang computational thinking dan computer-aided learning.

One Comment

Leave a Reply