Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS

Seperti yang saya janjikan pada status di Twittermaupun 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:

view sourceprint?

1.CREATE TABLE `mhs` (

2.`nim` varchar(10),

3.`nama` varchar(10),

4.`jenisKelamin` varchar(10),

5.PRIMARY KEY  (`nim`)

6.);

view sourceprint?

1.INSERT INTO `mhs` VALUES ('A001', 'A', 'LAKI-LAKI');

2.INSERT INTO `mhs` VALUES ('A002', 'B', 'LAKI-LAKI');

3.INSERT INTO `mhs` VALUES ('A003', 'C', 'LAKI-LAKI');

4.INSERT INTO `mhs` VALUES ('A004', 'D', 'PEREMPUAN');

5.INSERT INTO `mhs` VALUES ('A005', 'E', 'LAKI-LAKI');

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

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:

view sourceprint?

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

view sourceprint?

01.<?php

02. 

03.// koneksi ke mysql

04.mysql_connect("dbhost", "dbuser", "dbpass");

05.mysql_select_db("dbname");

06. 

07.// mencari jumlah laki-laki dari database

08.$query = "SELECT count(*) AS jumCowok FROM mhs WHERE jenisKelamin = 'LAKI-LAKI'";

09.$hasil = mysql_query($query);

10.$data  = mysql_fetch_array($hasil);

11.$jumCowok = $data['jumCowok'];

12. 

13.// mencari jumlah perempuan dari database

14.$query = "SELECT count(*) AS jumCewek FROM mhs WHERE jenisKelamin = 'PEREMPUAN'";

15.$hasil = mysql_query($query);

16.$data  = mysql_fetch_array($hasil);

17.$jumCewek = $data['jumCewek'];

18. 

19.// menghitung total mahasiswa

20.$total = $jumCowok + $jumCewek;

21. 

22.// menghitung prosentase laki-laki dan perempuan

23.$prosenCowok = $jumCowok/$total * 100;

24.$prosenCewek = $jumCewek/$total * 100;

25. 

26.// menentukan panjang grafik batang berdasarkan prosentase

27.$panjangGrafikCowok = $prosenCowok * 30 / 100;

28.$panjangGrafikCewek = $prosenCewek * 30 / 100;

29. 

30.?>

31. 

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

33. 

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

35. 

36.<p><b>Perempuan</b> (Jumlah: <?php echo $jumCewek; ?> | <?phpecho $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:

view sourceprint?

1.if ($prosenCowok == 0) $panjangGrafikCowok = 1;

2.else $panjangGrafikCowok = $prosenCowok * 30 / 100;

3. 

4.if ($prosenCewek == 0) $panjangGrafikCewek = 1;

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