Script php untuk membuat grafik

Grafik chart sering digunakan untuk mempermudah pembacaan data statistik. Dari grafik chart, kita juga dapat dengan mudah dan cepat dalam membaca informasi tentang suatu data. Nah… bagi Anda yang telanjur jatuh cinta dengan PHP, kira-kira bisa tidak ya menampilkan data statistik ke dalam bentuk chart? Jawabannya jelas BISA donk… Bahkan kita dapat mengintegrasikan chart tersebut dengan database, maksudnya data statistik yang tersimpan dalam database nantinya akan direpresentasikan ke dalam bentuk chart.

Kalau PHP bisa digunakan untuk membuat chart? lantas… gimana caranya? Sulitkah membuatnya?

Pada saat sekarang dimana banyak orang yang baik hati, para pecinta PHP tidak perlu lagi repot-repot membuat script chart. Mengapa? ya… karena ada orang yang baik hati dalam membuat modul chart yang siap pakai. Tugas para programmer hanyalah membuat script untuk mengintegrasikan modul chart tersebut dengan data yang dimilikinya, serta mengatur tampilan chartnya saja.

Wah asyik nih… trus nama modulnya apa yah? Nama modulnya adalah JpGraph. Pada artikel yang lain, saya telah menunjukkan cara penggunaannya untuk keperluan verifikasi form supaya terhindar dari spam. Sedangkan kini, saya akan tunjukkan cara penggunaanya untuk menampilkan chart dari data mysql.

Untuk kali ini, saya akan ambil studi kasus tentang data statistik penduduk suatu negara. Misalkan struktur tabel yang digunakan adalah sbb:

view sourceprint?

1.CREATE TABLE sensus (

2.negara varchar(20),

3.tahun varchar(4),

4.jmlpria int(11),

5.jmlwanita int(11),

6.PRIMARY KEY  (negara, tahun)

7.)

dan berikut ini adalah sampel datanya

view sourceprint?

01.INSERT INTO `sensus` VALUES ('A', '1990', '20', '31');

02.INSERT INTO `sensus` VALUES ('B', '1990', '30', '42');

03.INSERT INTO `sensus` VALUES ('C', '1990', '32', '16');

04.INSERT INTO `sensus` VALUES ('A', '1991', '41', '17');

05.INSERT INTO `sensus` VALUES ('B', '1991', '24', '32');

06.INSERT INTO `sensus` VALUES ('C', '1991', '34', '17');

07.INSERT INTO `sensus` VALUES ('A', '1992', '52', '35');

08.INSERT INTO `sensus` VALUES ('B', '1992', '12', '22');

09.INSERT INTO `sensus` VALUES ('C', '1992', '34', '34');

OK… sekarang akan kita coba menampilkan chart berbentuk garis yang merepresentasikan jumlah total penduduk negara A untuk setiap tahun.

view sourceprint?

01.<?php

02.include ("modul/jpgraph.php");

03.include ("modul/jpgraph_line.php");

04. 

05.// membuat array inisial untuk jumlah penduduk dan tahunnya

06.$dataJum = array();

07.$dataTh = array();

08. 

09.// koneksi ke db

10.mysql_connect("localhost","root","root");

11.mysql_select_db("data");

12. 

13.

auto !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; outline-color: initial !important; outline-style: initial !important; outline-width: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// query SQL untuk mencari jumlah totol penduduk untuk setiap tahun pada negara A

14.$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";

15.$hasil = mysql_query($query);

16.while ($data = mysql_fetch_array($hasil))

17.{

18.// hasil data query ditambahkan ke dalam array jumlah pendudukan dan tahun

19.array_unshift($dataJum, $data['jum']);

20.array_unshift($dataTh, $data['tahun']);

21.}

22. 

23.// membuat grafik dengan size 300x200 px

24.$graph = new Graph(300,200,"auto");

25.$graph->SetScale("textlin");

26. 

27.// menampilkan data jumlah penduduk ke dalam plot garis

28.$lineplot=new LinePlot($dataJum);

29.$graph->Add($lineplot);

30. 

31.// mengatur margin plot

32.$graph->img->SetMargin(40,20,20,40);

33. 

34.// menampilkan title dari grafik

35.$graph->title->Set("Grafik Jumlah Penduduk Negara A");

36. 

37.// menampilkan label pada sumbu x grafik

38.$graph->xaxis->title->Set("Tahun");

39. 

40.// menampilkan label pada sumbu y grafik

41.$graph->yaxis->title->Set("Jumlah");

42. 

43.// menampilkan titik data pada sumbu x (tahun)

44.$graph->xaxis->SetTickLabels($dataTh);

45. 

46.// mengatur jenis font pada title grafik

47.$graph->title->SetFont(FF_FONT1,FS_BOLD);

48. 

49.// memberi warna biru pada plot garis

50.$lineplot->SetColor("blue");

51. 

52.// memberikan efek shadow pada image

53.$graph->SetShadow();

54. 

55.// tampilkan grafik ke browser

56.$graph->Stroke();

57.?>

Perhatikan perintah berikut ini

view sourceprint?

1.include ("jpgraph.php");

2.include ("jpgraph_line.php");

Buat apa tuh kedua perintah? Kedua perintah akan memanggil modul jpgraph dan modul untuk membuat chart garis. Tanpa kedua modul file tersebut, chart garis tidak muncul, namun yang muncul adalah error . Anda dapat mendownload modul-modul tersebut di bagian bawah artikel ini.

Oya data yang akan ditampilkan dengan Jpgraph basisnya adalah array, sehingga dalam script di atas kita buat data dalam bentuk array.

Hasil dari script di atas adalah sbb:

Kita juga dapat membuat chart garis dan batang menjadi satu (combined). Berikut ini adalah script untuk menggabungkan kedua bentuk chart menjadi satu. Contoh ini sekaligus menjawab pertanyaan mbak Dian dalam komentar yang dituliskannya.

<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

$dataJum = array();
$dataTh = array();

mysql_connect("localhost","root","root");
mysql_select_db("data");

$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
 array_unshift($dataJum, $data['jum']);
 array_unshift($dataTh, $data['tahun']);
}

$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin");

// menampilkan plot batang dari data jumlah penduduk
$bplot = new BarPlot($dataJum);
$graph->Add($bplot);

// menampilkan plot garis dari data jumlah penduduk
$lineplot=new LinePlot($dataJum);
$graph->Add($lineplot);

$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Grafik Jumlah Penduduk Negara A");
$graph->xaxis->title->Set("Tahun");
$graph->yaxis->title->Set("Jumlah");
$graph->xaxis->SetTickLabels($dataTh);

$graph->title->SetFont(FF_FONT1,FS_BOLD);

$lineplot->SetColor("blue");
$bplot->SetFillColor("red");

$graph->SetShadow();
$graph->Stroke();
?>

Untuk membuat chart batang, kita gunakan modul jpgraph_bar.php. Hasil dari script di atas adalah

Kita juga dapat membuat chart garis dan batang menjadi satu (combined). Berikut ini adalah script untuk menggabungkan kedua bentuk chart menjadi satu.

<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

$dataJum = array();
$dataTh = array();

mysql_connect("localhost","root","root");
mysql_select_db("data");

$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
 array_unshift($dataJum, $data['jum']);
 array_unshift($dataTh, $data['tahun']);
}

$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin");

// menampilkan plot batang dari data jumlah penduduk
$bplot = new BarPlot($dataJum);
$graph->Add($bplot);

// menampilkan plot garis dari data jumlah penduduk
$lineplot=new LinePlot($dataJum);
$graph->Add($lineplot);

$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Grafik Jumlah Penduduk Negara A");
$graph->xaxis->title->Set("Tahun");
$graph->yaxis->title->Set("Jumlah");
$graph->xaxis->SetTickLabels($dataTh);

$graph->title->SetFont(FF_FONT1,FS_BOLD);

$lineplot->SetColor("blue");
$bplot->SetFillColor("red");

$graph->SetShadow();
$graph->Stroke();
?>

Untuk membuat chart batang, kita gunakan modul jpgraph_bar.php. Hasil dari script di atas adalah

Script yang terakhir… sekarang kita coba tampilkan chart batang yang menunjukkan data statistik jumlah masing-masing pria dan wanita untuk setiap negara pada tahun 1990. Dalam hal ini chart batang akan dikelompokkan berdasarkan jenis kelamin. Nah… ini dia scriptnya

<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

// inisialisasi array untuk jumlah pria, wanita dan negara

$dataPria = array();
$dataWanita = array();
$dataNegara = array();

// koneksi ke mysql

mysql_connect("localhost","root","root");
mysql_select_db("data");

// query SQL untuk menampilkan nama negara dan jumlah prianya pada tahun 1990

$query = "SELECT negara, jmlpria, jmlwanita FROM sensus WHERE tahun = '1990' ORDER BY negara DESC";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
    // menambahkan data hasil query ke array
    array_unshift($dataNegara, $data['negara']);
    array_unshift($dataPria, $data['jmlpria']);
    array_unshift($dataWanita, $data['jmlwanita']);
}

// membuat image dengan ukuran 400x200 px
$graph = new Graph(400,200,"auto");
$graph->SetScale("textlin");

// menampilkan diagram batang untuk data pria dengan warna orange
// pada diagram batang ditampilkan value data
$bplot1 = new BarPlot($dataPria);
$bplot1->SetFillColor("orange");
$bplot1->value->show();

// menampilkan diagram batang untuk data wanita dengan warna biru
// pada diagram batang ditampilkan value data
$bplot2 = new BarPlot($dataWanita);
$bplot2->SetFillColor("blue");
$bplot2->value->show();

// mengelompokkan grafik batang berdasarkan pria dan wanita
$gbplot = new GroupBarPlot(array($bplot1,$bplot2));
$graph->Add($gbplot);

// membuat legend untuk keterangan pria dan wanita
$bplot1->SetLegend("Pria");
$bplot2->SetLegend("Wanita");
$graph->legend->Pos(0.05,0.5,"right","center");

// mengatur margin image
$graph->img->SetMargin(40,110,20,40);

// menampilkan title grafik dan nama masing-masing sumbu
$graph->title->Set("Grafik Jumlah Penduduk Negara Th 1990");
$graph->xaxis->title->Set("Negara");
$graph->yaxis->title->Set("Jumlah");

// menampilkan nama negara ke sumbu x
$graph->xaxis->SetTickLabels($dataNegara);

// format font title grafik
$graph->title->SetFont(FF_FONT1,FS_BOLD);

// menampilkan efek shadow pada image
$graph->SetShadow();

// menampilkan image ke browser
$graph->Stroke();
?>

Untuk lebih menarik dan lebih informatif kita tambahkan sebuah legend pada grafik tersebut. Legend tersebut menunjukkan warna berbeda untuk pria dan wanita. Hasil dari script di atas adalah

Menarik dan mudah bukan? Bila Anda ingin mendownload semua script di atas termasuk file-file modulnya, silakan download di bawah ini
Download Script dan Modul JpGraph
Update:
Ada tambahan script untuk JpGraph untuk keperluan modul languange nya. Tanpa script ini, JpGraph akan terjadi error. Silakan diekstrak di dalam folder hasil ekstrak script di atas.
Download Languange

Artikel Terkait di Bawah posting

php

• Script PHP Untuk Membuat Web Thumbnail / Screen Shot
• Update Data Suatu Tabel Bersumber Dari Tabel Lain Dengan Query SQL
• Script PHP Menampilkan Artikel Terkait
• Mencari Tingkat Text Similarity dengan PHP
• Cara install Wammu untuk/for ubuntu
• Contoh Relasi SQL antar tabel
• Problem Warning/Error Timezone di PHP
• Membuat Login Alternatif (Open ID) dengan Php
• Plugin Auto Forward SMS Inbox (Sms Gateway)
• Membuat barcode dengan php (Script)
• Membuat Website Dinamis Dengan PHP & MySQL
• Script PHP Update Status TWITTER via SMS
• Cara Import Database mysql di Phpmyadmin
• Pasang Social Bookmark | jQuery
• Optimalkan SEO on page tingkatin pagerank
• Membuat User Online dengan PHP
• Hit Counter Sederhana dengan PHP
• Membuat kamus Teknologi Informasi dengan PHP
• Script wall facebook gratis dengan php dan jquery
• Script PHP dan MySQL untuk kirim SMS Via Web
• Script PHP GIS Google Map Seperti Wikimapia dengan jQuery dan Mysql
• Script Notifikasi Seperti Facebook dengan jQuery dan PHP
• Memasang ReCaptcha di PHP
• Script PHP Untuk Backup MySQL

kumpulan script

• Script PHP Untuk Membuat Web Thumbnail / Screen Shot
• Script PHP Menampilkan Artikel Terkait
• Mencari Tingkat Text Similarity dengan PHP
• Problem Warning/Error Timezone di PHP
• Membuat Login Alternatif (Open ID) dengan Php
• Membuat barcode dengan php (Script)
• Membuat Website Dinamis Dengan PHP & MySQL
• Mencegah Data NULL di MySQL
• Memasang star rating di blogspot
• Script Sent Email localhost ke Gmail
• Cara Import Database mysql di Phpmyadmin
• Pasang Social Bookmark | jQuery
• Membuat User Online dengan PHP
• Hit Counter Sederhana dengan PHP
• Membuat kamus Teknologi Informasi dengan PHP
• Script wall facebook gratis dengan php dan jquery
• Script PHP dan MySQL untuk kirim SMS Via Web
• Script Notifikasi Seperti Facebook dengan jQuery dan PHP
• Script PHP Membuat Aplikasi Chatting sederhana
• Membuat GIS (Google Map Marker Multi Icon) dengan jQuery, PHP dan MySQL
• Memasang ReCaptcha di PHP
• Script PHP Untuk Backup MySQL
• Script php Penyingkat URL Shortener dengan API Google
• Pasang Chat Yahoo Messenger di Website

PHP AJAX jQuery

• Memasang star rating di blogspot
• Script PHP Update Status TWITTER via SMS
• Pasang Social Bookmark | jQuery
• Dasar Belajar HTML 5 - Pengenalan Tag - tag HTML 5
• Script PHP GIS Google Map Seperti Wikimapia dengan jQuery dan Mysql
• Script Notifikasi Seperti Facebook dengan jQuery dan PHP
• Script PHP Membuat Aplikasi Chatting sederhana
• Pencarian 2 Periode (Awal - Akhir) Menggunakan DatePicker jQuery
• Script Upload Gambar Menggunakan Ajax
• Membuat loading ala facebook dengan PHP
• Membuat Web Hosting Sendiri Dari Local PC
• Membuat Script PHP untuk Hapus Data dengan Multi Selection
• PHP AJAX jQuery

Posted in: kumpulan script, php, PHP AJAX jQuery