Salah satu library yang cukup sering saya gunakan adalah jpgraph, selain penggunaannya mudah, jpgraph juga sangat komplit fitur-fiturnya sehingga tampilan web kita jadi lebih cantik dan menarik. Terus apa hubungannya dengan asyik, menggelitik, tanpa rematik? Sebenarnya sih gak ada, cuman biar judulnya jadi panjang aja hehehe..

Disini akan dijelaskan bagaimana penggunaan JpGraph dari awal, sampai dengan penggunaannya yaang bermacam2 dan disertai database.

Untuk mencobanya, kita buat dahulu bentuk yang sederhana dengan data diambil dari array, dengan grafk berbentuk garis. Berikut kodenya

<?php

//karena ingin membuat grafik garis, selain library jpgraph,

//diperlukan juga jpgraph_line

include ("jpgraph/jpgraph.php");

include ("jpgraph/jpgraph_line.php");

 // contoh datanya

$ydata = array(11,3,8,12,5,1,9,13,5,7);

 // buat graph dengan auto scaling

$graph = new Graph(350,250,"auto"); 

$graph->SetScale("textlin");

 // Buat garis dengan warna biru

$lineplot=new LinePlot($ydata);

$lineplot->SetColor("blue");

 // tambahkan garis diatas ke grafik

$graph->Add($lineplot);

 // tampilkan graph-nya

$graph->Stroke();

?>

Setelah dijalankan, seharusnya akan muncul bentuk grafik garis berwarna biru seperti dibawah:

coba bandingkan point-point pada garis tersebut dengan data di $ydata. Bentuk garis ini akan otomatis berubah sesuai data yang dimasukkan.

Dalam kode diatas baru ada setting untuk memberi warna garis. Dengan mudah kita dapat mengganti warnanya dengan mengganti parameter ’blue’ dengan nama warna yang lain.

Dibagian terakhir sebelum graph digambar terlihat bahwa garis yang dibuat kemudian dimasukkan ke dalam grafik. Nah kita bisa membuat banyak garis dengan cara yang sama seperti diatas yaitu: definiskan data, definisikan bentuk garis (atau bentuk grafik lainnya), isikan setting2nya, dan tambahkan ke grafik. Misal kita tambahkan di sebelum $graph->Stroke(), kode berikut:

$ydata2 = array(10,13,4,2,7,5,11,3,9,2);

$lineplot2=new LinePlot($ydata2);

$lineplot2->SetColor("red");

$graph->Add($lineplot2);

maka akan terlihat graph seperrti gambar berikut

Selanjutnya, kita tambahkan pernik-pernik yang umumnya ada pada graph. Yang pertama adalah judul. Untuk membuat judul, cukup tambahkan kode berikut :

$graph->title->Set("Grafik Penjualan Sate");

kita tambahkan juga legend. Untuk legend, perlu ditambahkan di tiap object yang ada pada grafik, dalam contoh kita adalah 2 garis $lineplot dan $lineplot2.Jadi tambahkan kode:

 $lineplot->SetLegend("Ayam");

$lineplot2->SetLegend("Kambing");

Biar lebih jelas lagi, kita tambahkan caption pada sumbu X dan Y:

 
$graph->xaxis->title->Set("Bulan");

$graph->yaxis->title->Set("Jumlah (ribu porsi)");

Setelah ditambah judul , legend, nama sumbu , bentuk grafik akan menjadi seperti berikut:

Untuk garis, bentuknya dapat diganti dengan SetStyle dengan parameter  solid , dotted, dashed, atau lobgdashed. Selain itu ada type lain yaitu stepstyle. Bisa ditambahkan kode berikut untuk mencobanya

$lineplot->SetStyle("dashed");

$lineplot2->SetStepStyle();

maka tampilan grafik akan berubah seperti ini

titik2 poit pada garis bisa diperjelas dengan menggunakan mark dan valuenya.

$lineplot->mark->SetType(MARK_CIRCLE);

$lineplot->value->show();

dan bentuknya menjadi:

Isi dari titik2 di sumbu X dapat diganti dengan mengambil dari suatu data array. Ini bisa dimanfaatkan misalnya untuk diganti menjadi nama hari atau nama bulan. Misal ditambahkan kode berikut:

 $datax=array("Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agt","Sep","Okt");

$graph->xaxis->SetTickLabels($datax);

Untuk bentuk garis sepertinya sudah cukup komplit. Sekarang waktunya untuk menambah pengetahuan ke bentuk-bentuk yang lain. Pada dasarnya untuk menggunakan bentuk yg lain hanya perlu menggaanti beberapa bagian saja. Yaitu di bagian include library dan dibagian new . Nama variabel kan tidak perlu diganti, hanya kalo tidak diganti bikin jadi kurang cocok aja :)

Tapi sebelum ke bentuk2 yang lain selain garis, ada bentuk yang diturunkan dari bentuk gaaris ini, yaitu dengan menambahkan :

 $lineplot->SetFillColor("cyan");

ini akan membuat bentuk seperti dibawah:

Salah satu bentuk grafik yg juga sering dipakai selain bentuk garis yaitu grafik batang atau bar. Maka untuk berikutnya adalah bagaimana membuat grafik batang. Tambahkanlah kode berikut:

include ("jpgraph/jpgraph_line.php");

$ydata3 = array(2,4,6,8,10,12,15,7,3,1);

$bplot = new BarPlot($ydata3);

$bplot->SetFillColor("orange");

$bplot->SetLegend("Kelinci");

$graph->Add($bplot);

maka grafiknya akan berubah menjadi seperti berikut:

Seringkali dalam grafik batang, terlihat batangnya seakan-akan 3 dimensi, ini dapat dibuat dengan menambahkan satu baris kode berikut:

$bplot->SetShadow();

sehingga tampilannya menjadi seperti dibawah

ukuran dari batang dapat diperlebar. Dengan bentuk yang lebih longgar ini, didalamnya diisi dengan nilai. Bisa dilakukan dengan kode berikut:

//tampilkan nilai

$bplot->value->Show();

$bplot->value->SetFormat('%d');

// letakkan ditengah bar

$bplot->SetValuePos('center');

// buat bar lebih lebar

$bplot->SetWidth(0.8);

Grafik batang sering kali dibuat ber-grup. Untuk membuat bergroup seperti ini, perlu object baru yaitu GroupBarPlot. GroupbarPlot dibentuk dari array barPlot. Untuk lebih jelasnya coba ditambahkan kode dibawah

//datanya

$data1y=array(1,2,3,3,1,2);

$data2y=array(2,2,2,1,3,3);

// membuat bar plots

$b1plot = new BarPlot($data1y);

$b1plot->SetFillColor("green");

$b1plot->SetLegend("kerang");

$b2plot = new BarPlot($data2y);

$b2plot->SetFillColor("blue");

$b2plot->SetLegend("usus");

// membuat grouped bar plot

$gbplot = new GroupBarPlot(array($b1plot,$b2plot));

$gbplot->SetWidth(0.8);

// dan masukkan ke grafik

$graph->Add($gbplot);

Berikut hasil tampilan setelah kode diatas ditambahkan.

Bentuk berikutnya yg juga sering dipakai selain garis dan batang adalah pie. Untuk membuat contoh yg Pie, kita bikin file baru. Selain contoh diatas sudah cukup ruwet dan penuh sesak, bentuk Pie biasanya berdiri sendir, tidak cocok untuk digabung dengan garis dan batang.

Berikut contoh sederhananya:

<?php

include ("jpgaph/jpgraph.php");

include ("jpgraph/jpgraph_pie.php");

$data = array(40,60,21,33);

$graph = new PieGraph(300,200,"auto");

$graph->SetShadow();

$graph->title->Set("Penjualan Sate");

$p1 = new PiePlot($data);

$graph->Add($p1);

$graph->Stroke();

?>

dimana kode diatas akan membuat grafik seperti dibawah:

Tapi agak jarang orang menggunakan pie yang flat seperti diatas, kebanyakan lebih memilih yang 3 dimensi. Berikut adalah contoh yang 3 dimensi sekaligus ditambah dengan legend.

<?php

include ("jpgraph/jpgraph.php");

include ("jpgraph/jpgraph_pie.php");

include ("jpgraph/jpgraph_pie3d.php");

$data = array(40,60,21,33);

$graph = new PieGraph(300,200,"auto");

$graph->SetShadow();

$graph->title->Set("Penjualan Sate");

$p1 = new PiePlot3D($data);

//besarnya pie

$p1->SetSize(0.5);

$p1->SetLegends(array("Ayam","Kambing","Klopo","Kelinci"));

$graph->Add($p1);

$graph->Stroke();

?>

Tampilan 3Dnya seperti ini :

Kayaknya cukup sampai ini dulu tentang fasilitas JPGraph-nya. Fasilitas2 jpgraph yang lain biasanya digunakan untuk keperluan2 yg lebih khusus, misal untuk Candle Stick di grafiknya saham / index / forex, grafik2 untuk yang ilmiah2 yang pakai rumus-rumus tertentu, dan sebagainya.

Biasanya data yang tadinya dari array, saat diimplementasikan digantiu dengan diambil dari database. Intinya adalah, ambil dari tabel, dan dimasukkan ke array.

Berikut adalah contoh jika diambil dari database mysql . Dari tabel Nilai, dengan field Nama, dan Nilai. Nama digunakan untuk sumbu X, nilai untuk sumbu Y. Grafiknya adalah nilai-nilai yang dimiliki oleh tiap-tiap nama di field nama.

<?php

include ("jpgraph/jpgraph.php");

include ("jpgraph/jpgraph_line.php");

//connect database

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

mysql_select_db("student");

//select tabel

$datas = mysql_query("select * from mahasiswa");

//inisialisasi array

$nilai=array();

$nama=array();

//looping membaca isi table, dimasukkan ke array

$data=mysql_fetch_assoc($datas);

while($data)

{

            array_push($nilai,$data[nilai]);

            array_push($nama,$data[nama]);

            $data=mysql_fetch_assoc($datas);

}

// buat graph dengan auto scaling

$graph = new Graph(350,250,"auto"); 

$graph->SetScale("textlin");

// Buat garis dengan warna biru

$lineplot=new LinePlot($nilai);

$graph->xaxis->SetTickLabels($nama);

$lineplot->SetColor("blue");

// tambahkan garis diatas ke grafik

$graph->Add($lineplot);

// tampilkan graph-nya

$graph->Stroke();

?>

Comments

Search

Butuh script setting waktu arifin (203.153.107.xxx) 2009-02-16 10:02:25 Menarik sekali apa yang Bapak tulis. Saya sudah coba dan hasilnya "Baik". Sekarang saya sedang coba dengan data sumbu x menyatakan waktu dan sumbu y menyatakan jumlah point. Saya gunakan data dari MySQL dengan format waktu 0000 dan akan ditampilkan di grafik dengan format 000. Namun masih dalam kendala dengan script PHP sbb: Untuk untuk mohon bantuannya Sebelumnya diucapkan terima kasih.

Anonymous (122.139.62.xxx) 2009-05-27 01:43:00 cheap wow power leveling cheapest wow power leveling my wow gold buy wow gold replica replica rolex CHEAP wow power level BUY power leveling replica rolex replica CHEAPEST power leveling MY wow power level cheap rs gold good BUY wow gold replica rolex CHEAPEST wow gold cheap lotro gold buy wow gold my wow gold cheapest wow gold CHEAP wow gold zmc

Women Buy Ugg Boots (220.161.165.xxx) 2010-02-27 02:45:59 With all the boots [url=http://www.zhjugg.com/new-product-ugg-bailey-  button-58 03-grey-boots-p-]UGG Bailey Button Grey[/url] included in Ugg Australia’s Classic Collection range the Bailey chenwei Button is lined ugg cardy oatmeal with twin faced Grade A sheepskin. Also there is the UGG Bailey Button traditional suede heel guard to ensure that not only is this area protected but offers this part of the boot support. Ugg Cardy Boots Plus within the boots you find each pair has sock liners that are made from sheepskin PU foam so increasing the level of Ugg Cardy comfort a person feels when wearing them.

MBT Shoes mbt uk (220.161.165.xxx) 2010-02-27 05:16:06 When you purchase Mbt shoes you achieve shoes that appeal mbt shoes to your sense of style while insuring a shoe that does not cause pain and discomfort after a day mbt trainers shoes of being on your feet. And after your purchase you know you have shoes that are going to outlast shoes found in most stores. Created for comfort and long lasting, MBT shoes utilize the highest quality leather and materials. If you  experience mbt uk discomfort from your foot perspiring during the day MBT Shoes applies a sock lining in the lining of the shoe where you foot rests. mbt shoe This allows your feet to stay dry during the most challenging active days.hlm

激安 ユニフォ& 激安 ユ| (220.161.165.xxx) 2010-02-27 06:50:12 LCZ  読売巨人軍は 、ビ ;ジターゲ&# 12540;ムで着用& #12377; 427;夏季限定のӎ 0;| 69;マービジタ ーユニホ ;ーム&# 12301;を 採用しま 2377;。ユニフォーム...このユニ ホӦ 0; ムの 発表会見&# 12364;１２日（&# 26376;A 289;、東京・大৔ 3;ஹ 0;の球団事務 所で開か れ、&# 12481;ームを代表  375;て 坂本勇人選手&# ...

Paul Smith (220.161.165.xxx) 2010-02-27 06:52:01 Our store offer the cheap paul smith for you,sale new Paul Smith Shoes,and we will give my best server to you.Come on, more order will get more discount.You can not miss them!rlh

Women Buy Ugg Boots (125.78.240.xxx) 2010-02-27 07:40:38 With all the boots [url=http://www.zhjugg.com/new-product-ugg-bailey-  button-58 03-grey-boots-p-]UGG Bailey Button Grey[/url] included in Ugg Australia’s Classic Collection range the Bailey chenwei Button is lined ugg cardy oatmeal with twin faced Grade A sheepskin. Also there is the UGG Bailey Button traditional suede heel guard to ensure that not only is this area protected but offers this part of the boot support. Ugg Cardy Boots Plus within the boots you find each pair has sock liners that are made from sheepskin PU foam so increasing the level of Ugg Cardy comfort a person feels when wearing them.

激安 ユニフォ& 激安 ユ| (220.161.165.xxx) 2010-02-27 09:03:33 LCZ  読売巨人軍は 、ビ ;ジターゲ&# 12540;ムで着用& #12377; 427;夏季限定のӎ 0;| 69;マービジタ ーユニホ ;ーム&# 12301;を 採用しま 2377;。ユニフォーム...このユニ ホӦ 0; ムの 発表会見&# 12364;１２日（&# 26376;A 289;、東京・大৔ 3;ஹ 0;の球団事務 所で開か れ、&# 12481;ームを代表  375;て 坂本勇人選手&# ...

Paul Smith (220.161.165.xxx) 2010-02-27 09:21:50 Our store offer the cheap paul smith for you,sale new Paul Smith Shoes,and we will give my best server to you.Come on, more order will get more discount.You can not miss them!rlh

MBT Shoes mbt uk (220.161.165.xxx) 2010-02-27 10:15:43 When you purchase Mbt shoes you achieve shoes that appeal mbt shoes to your sense of style while insuring a shoe that does not cause pain and discomfort after a day mbt trainers shoes of being on your feet. And after your purchase you know you have shoes that are going to outlast shoes found in most stores. Created for comfort and long lasting, MBT shoes utilize the highest quality leather and materials. If you experience mbt uk discomfort from your foot perspiring during the day MBT Shoes applies a sock lining in the lining of the shoe where you foot rests. mbt shoe This allows your feet to stay dry during the most challenging active days.hlm

nike-shox (125.78.242.xxx) 2010-02-27 12:45:01 rr Today, the nike shox basketball shoes are popular around the world. wholesale nike shox shoes started out as an American company, but have since expanded around the globe. They're now available in 120 countries. shox r4 with an emphasis on walking shoes, the engineers at New Balance know the importance of a proper fit and offer a wide range of widths and sizes. Often recommended by podiatrists, nike running shoes take an "endorsed by no one" stance, preferring to let their technology and comfort sell their shoes instead of paying a celebrity athlete to do it for them. Additionally, nike shox monster are available in a variety of styles, each designed for different needs-motion control, extra support, off road, use etc. New Balance makes running, walking, tennis, cross-training and basketball shoes for men and women, and also offers a line of kids' ...

timberland timberland (220.161.165.xxx) 2010-02-27 13:03:47 mm Apparently, 21,000 boots imported by Timberland from Thailand have lead paint on the insole, violating federal lead paint rules. I'm guessing this paint was used for printing of the logo inside the boot. Please note Dear Readers, these are Timberland waterproof and children are particularly sensitive to the effects of lead and lead poisoning. Avoid a lead paint accident that could injure or hurt your child. When I first saw this I thought, "How do you make Timberland work boots? Where's the risk of accident or injury?" Then I read further and saw, "lead paint." The headline reads:"Timberland Recalls Timberland for kids Due to Violation of Lead Paint Standard"The U.S. Consumer Product Safety Commission announced a voluntary recall of these boots. Consumers should stop using recalled products immediately.

nike (220.161.165.xxx) 2010-02-27 13:05:30 mm Apparently, 21,000 boots imported by Timberland from Thailand have lead paint on the insole, violating federal lead paint rules. I'm guessing this paint was used for printing of the logo inside the boot. Please note Dear Readers, these are Timberland waterproof and children are particularly sensitive to the effects of lead and lead poisoning. Avoid a lead paint accident that could injure or hurt your child. When I first saw this I thought, "How do you make Timberland work boots? Where's the risk of accident or injury?" Then I read further and saw, "lead paint." The headline reads:"Timberland Recalls Timberland for kids Due to Violation of Lead Paint Standard"The U.S. Consumer Product Safety Commission announced a voluntary recall of these boots. Consumers should stop using recalled products immediately.

mbt walking shoes (59.58.157.xxx) 2010-02-27 16:00:59 ZSM MBT: The idea of mbt shoe Physiological Footwear MBT, Masai Barefoot mbt walking shoes Technology, was invented by Swiss engineer Karl Müller mbt shoes sale . During a visit to Korea he made the startling mbt sale discovery that walking barefoot mbt masai shoes over paddy fields alleviated his back pain mtb shoes . Back in Switzerland, Müller began to develop a footwear technology that would make the natural instability mbt footwear of soft ground such as Korean paddy fields discount mbt shoes or the East African savannah accessible also to those, mbts shoes who have to walk on hard surfaces. In 1996, after years spent mbt lami shoes on research and development, Masai Barefoot Technology was mature enough to be

coach-handbag-c (59.58.157.xxx) 2010-02-27 16:05:00 ZSM handbags snap closure, and silver-tone buckle embellishments. coach handbag outlet Double rolled straps and silver-tone hardware coach bag feet on the bottom of the bag coach leather handbag provide added durability. This chic tote is perfect for coach signature handbag everyday use and adds subtle

cheap jerseys (59.58.157.xxx) 2010-02-27 16:18:20 ZSM With the survival cheap jerseys of people longer in the community, you will find  that memories authentic jerseys are the most valuable when to turn around. If  there are no cheap jerseys memories with a companion, then how we will to spend our old age, lonely nfl jersey life? I have all of the most unforgettable memories are treasures on this NFL nfl  football jerseys jersey, which is made from 100% nylon diamond back mesh body and Nylon dazzle sleeves and yoke. These football jerseys factors played a very important role in keeping the time.

paul smith london (59.58.157.xxx) 2010-02-27 16:27:51 ZSM I've been looking forward to Silent Hunter 5 paul smith london for a while now as regular readers will know I am a bit of a submarine paul smith london  fan. Playing number 2 and 3 to death, for those wondering Silent Hunter 4 was set in paul smith sale the Pacific and in my opinion nothing could be more boring :-) Silent Number 5 when it paul smith sale was first announced was looking fantastic. However a few months ago paul smith shop it was announced there would only be one submarine, a Type VII. Now I don't paul smith shop know about you, but I started my career as a U-Boat captain in a Type II paul smith

timberland timberland (220.161.165.xxx) 2010-02-27 17:05:18 mm Apparently, 21,000 boots imported by Timberland from Thailand have lead paint on the insole, violating federal lead paint rules. I'm guessing this paint was used for printing of the logo inside the boot. Please note Dear Readers, these are Timberland waterproof and children are particularly sensitive to the effects of lead and lead poisoning. Avoid a lead paint accident that could injure or hurt your child. When I first saw this I thought, "How do you make Timberland work boots? Where's the risk of accident or injury?" Then I read further and saw, "lead paint." The headline reads:"Timberland Recalls Timberland for kids Due to Violation of Lead Paint Standard"The U.S. Consumer Product Safety Commission announced a voluntary recall of these boots. Consumers should stop using recalled products immediately.

Only registered users can write comments!

Powered by !JoomlaComment 3.26

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."