GRAFIK DINAMIS PADA WEBSITE
Grafik Dinamis pada Web
PENDAHULUAN
Tulisan ini merupakan lanjutan dari artikel penulis sebelumnya tentang Membuat Grafik pada Web dengan JPGraph. Bila pembaca belum mengenal JPGraph, penulis menyarankan agar membaca artikel tersebut sebelumnya.
Dengan bermodalkan sedikit dasar-dasar tentang JPGraph, maka pada bagian ini akan penulis jelaskanlebuhlanjut tentang beberapa kelebihan yang dimiliki oleh JPGraph diantaranya bagaimana membuat Pie Chart dan fungsi-fungsi lain yang bermanfaat. Namun sebelum dilanjutkan, saya mengingatkan untuk mengecek konfigurasi dari JPGraph dan pastikan telah berjalan dengan baik.
Contoh penggunaan JPGraph
CREATE TABLE `students` (`Name` varchar(50) default NULL, `Marks` int(11) default NULL);
|
Hasil dari Query MySQL diatas |
Name |
Archie |
Andrew |
Hulk |
Jay |
|
|
Marks |
90 |
67 |
67 |
98 |
PHP Example: (!)
<?php
include ("C:/ jpgraph-1.12.2/src/jpgraph.php");
include ("C:/ jpgraph-1.12.2/src/jpgraph_pie.php");
include ("C:/jpgraph-1.12.2/src/jpgraph_pie3d.php");
$db = mysql_connect("localhost", "root","") or die(mysql_error());
mysql_select_db("test",$db) or die("db problem") ;
$sql = mysql_query("SELECT * FROM students") or die(mysql_error());
while($row = mysql_fetch_array($sql))
{
$data[] = $row[1];
$leg[] = $row[0];
}
$graph = new PieGraph(350,250,"auto");
$graph->SetShadow();
$graph->title->Set("MySQL & JpGraph");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$p1 = new PiePlot3D($data);
$p1->SetSize(.3);
$p1->SetCenter(0.45);
$p1->SetStartAngle(20);
$p1->SetAngle(45);
$p1->SetLegends($leg);
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor("darkred");
$p1->SetLabelType(PIE_VALUE_PER);
$a = array_search(max($data),$data); //Find the position of maixum value.
$p1->ExplodeSlice($a);
$graph->Add($p1);
$graph->Stroke();
?>
Output JPGraph dari script diatas
Keterangan dari kode program
Ketika akan membuat sebuah grafik berbentuk Pie maka kita harus mengiklutkan fungsi-fungsi berikut “jpgraph_pie.php” dan “jpgraph_pie3d.php”. Sedangkan untuk beberapa script yang ada, telah dijelaskan pada tulisan sebelumnya bagian I sehingga pada tulisan ini saya hanya menjelaskan beberapa hal baru saja.
include ("C:/ jpgraph-1.12.2/src/jpgraph.php");
include ("C:/ jpgraph-1.12.2/src/jpgraph_pie.php");
include ("C:/jpgraph-1.12.2/src/jpgraph_pie3d.php");
$db = mysql_connect("localhost", "root","") or die(mysql_error());
mysql_select_db("test",$db) or die("db problem") ;
$sql = mysql_query("SELECT * FROM students") or die(mysql_error());
while($row = mysql_fetch_array($sql))
{
$data[] = $row[1];
$leg[] = $row[0];
}
$graph = new PieGraph(350,250,"auto");
$graph->SetShadow();
JPGraph diklaim sebagai sebuah aplikasi yang luar biasa (amazing) karena hanya dengan beberapa script program bisa menghasilkan sesuatu yang menarik, unik dan berguna (valuable). Penerapannya banyak digunakan oleh para programmer senior sebagai bahan analisa database atau menampilkan sebuah informasi yang menarik.
$graph->title->Set("MySQL & JpGraph");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
Fungsi $graph->title->Set(“MySQL & JpGraph”); digunakan untuk memberi judul pada badian atas di grafik yang kita dibuat. Sedangkan
fungsi $graph->title->SetFont(FF_FONT1,FS_BOLD); digunakan untuk menentukan penggunaan font (lihat pembahasan artikel bagian I).
$p1 = new PiePlot3D($data);
Fungsi $p1 = new PiePlot3D($data); digunakan untuk menggambar Pie Chart, dengan fungsi ini sebuah pie berbentuk 3D akan menampilkan data ($data).
$p1->SetSize(.3);
Fungsi $p1->SetSize(.3); digunakan untuk menentukan ukuran radius dari Pie Chart yang akan kita buat. Secara default nilainya antara 0 dan 1.
$p1->SetCenter(0.45);
Fungsi $p1->SetCenter(0.45); digunakan untuk menegahkan, urutan parameter yang digunakan adalah X dan Y. Kedua-duanya secara default memiliki nilai 0.5.
$p1->SetStartAngle(20);
Fungsi $p1->SetStartAngle(20); digunakan untuk menentukan arbitary. Nilai positif akan mengarahkan gambar kita searah jalur jam sedangkan nilai negative akan mengarahkan gambar kita sebaliknya. Ukurun yang digunakan pada fungsi ini adalah dalam derajat.
$p1->SetAngle(45);
Fungsi $p1->SetAngle(45); digunakan untuk menentukan sudut atau bentuk kemiringan pada grafik yang akan ditampilkan. Nilai yang digunakan antara 10-80 derajat.
Legends
Legends adalah sebuah gambar kecil yang biasanya terletak disamping kiri atau kanan, diatas atau dibawah yang berguna untuk membantu memberikan keterangan terhadap grafik yang kita buat. Adapun fungsi-fungsi yang terdapat pada bagian ini akan dijelaskan poin-poin pentingnya saja, untuk lebih lengkap bisa dilihat pada website tutorial http://www.aditus.nu/JPGraph.
$p1->SetLegends($leg);
Fungsi $p1->SetLegends($leg); digunakan untuk membuat Legend.
$p1->value->SetFont(FF_FONT1,FS_BOLD);
Fungsi $p1->value->SetFont(FF_FONT1,FS_BOLD); untuk menentukan huruf
$p1->value->SetColor("darkred");
Fungsi $p1->value->SetColor(“darkred”); untuk mengatur warna
$p1->SetLabelType(PIE_VALUE_PER);
Fungsi $p1->SetLabelType(PIE_VALUE_PER); menentukan tipe label berupa argument. Sedangkan $p1->SetLabelType(PIE_VALUE_PER, PIE_VALUE_ABS) berupa label berupa porsentase (%).
$a = array_search(max($data),$data); //Find the position of maixum value.
Fungsi $a = array_search(max($data),$data); menentukan nilai maksimum dari sebuah data, disimpan dalam bentuk $a.
$p1->ExplodeSlice($a);
Fungsi $p1->ExplodeSlice($a); menampilkan nilai dari $a
Mengutak-atik beberpa script JPGraph
Untuk memperdalam pemahaman terhadap pembahasan pada tulisan ini, silahkan dicoba untuk mengotak-atik bagian terakhir dari kumpulan koding dalam sebuah program yang terdapat dibawah ini. Ingat, “Practice Makes Perfect”. Semoga bermanfaat dan sampai jumpa pada penjelasan di tutorial selanjutnya.
PHP Example: (!)
<?
$graph = new PieGraph(300,200,"auto");
$graph->SetShadow();
$graph->title->Set("MySQL & JpGraph");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$p1 = new PiePlot3D($data);
$p1->SetSize(.2);
$p1->SetCenter(0.40);
$p1->SetAngle(45);
$p1->SetLabelType(PIE_VALUE_ABS);
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor("red");
$p1->value->SetFormat('%d Per');
$p1->value->Show();
$p1->ExplodeAll(5);
$p1->SetLegends($leg);
$graph->Add($p1);
$graph->Stroke();
?>
Output JPGraph dari script diatas
REFERENSI
Basic Tutorial of JPGraph
Tutorial Scripts
Manual Book of MySQl
Tinggalkan Balasan