Membuat Grafik Bar 3D dengan JPGraph, PHP, MyQL

Sebelum memulai membuat grafik bar, Anda terlebih dahulu harus mendownload file-file berikut:

  • jpgraph.php
  • jpgraph_bar.php

Silahkan didownload langsung dari situs resminya http://www.aditus.nu/jpgraph/

Tahap yang ke-dua, buatlah tabel di database MySQL Anda. Sebagai contoh Anda bisa gunakan kode sql di bawah ini:

CREATE TABLE IF NOT EXISTS `data_grafik` (
`data_2006` int(10) default NULL,
`data_2007` int(10) default NULL,
`data_2008` int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `data_grafik`
--

INSERT INTO `data_grafik` (`data_2006`, `data_2007`, `data_2008`) VALUES
(4, 6, 5),
(4, 5, 5),
(4, 4, 7),
(5, 12, 7),
(4, 7, 8),
(5, 4, 8);

Dan yang terakhir, tulis kode php di bawah ini.

//Sesuaikam dengan folder Anda


$dbid = mysql_connect('hos_Anda', 'username_Anda', 'password_Anda');

mysql_select_db('database_Anda',$dbid)

or die ("Cannot find database");


$sql = mysql_query("SELECT * FROM data_grafik LIMIT 0,6");
while($row = mysql_fetch_array($sql))
{
$data1[] = $row[0];
$data2[] = $row[1];
$data3[] = $row[2];
}

// We need some data
$data1y=array(10,4,6,8,6,5);
$data2y=array(5,7,9,6,5,8);
$data3y=array(6,5,11,3,9,9);

$b1plot = new BarPlot($data1);
$b2plot = new BarPlot($data2);
$b3plot = new BarPlot($data3);

// Setup the graph.
$graph = new Graph(500,350,"auto");
$graph->SetScale("textlin",0,20);
$graph->img->SetMargin(25,85,25,25);
$graph->SetBackgroundImage("bg.jpg",BGIMG_FILLPLOT); //"bg.jpg" bisa Anda ganti dengan background Anda.
$graph->title->Set('"GRAFIK PERBANDINGAN JUMLAH PENDAFTAR PER-HARI"');
$graph->title->SetColor('darkred');
$graph->title->SetFont(FF_ARIAL);
$graph->legend->Pos( 0.02,0.5,"right" ,"center");


// Setup font for axis
$graph->xaxis->SetFont(FF_ARIAL);
$graph->yaxis->SetFont(FF_ARIAL);

// Create the bar pot

$b1plot->SetWidth(0.8);
$b1plot->SetLegend("2006");

$b2plot->SetWidth(0.8);
$b2plot->SetLegend("2007");

$b3plot->SetWidth(0.8);
$b3plot->SetLegend("2008");

// Setup values
$b1plot->value->Show();
$b1plot->value->SetFormat('%d');
$b1plot->value->SetFont(FF_TIMES);
$b2plot->value->SetColor("navy");

$b2plot->value->Show();
$b2plot->value->SetFormat('%d');
$b2plot->value->SetFont(FF_TIMES);
$b2plot->value->SetColor("olivedrab");

$b3plot->value->Show();
$b3plot->value->SetFormat('%d');
$b3plot->value->SetFont(FF_TIMES);
$b3plot->value->SetColor("orangered");

// Setup color for gradient fill style
$b1plot->SetFillGradient("navy","lightsteelblue",GRAD_WIDE_MIDVER);
$b2plot->SetFillGradient("olivedrab","olivedrab1",GRAD_WIDE_MIDVER);
$b3plot->SetFillGradient("orangered","khaki",GRAD_WIDE_MIDVER);

// Set color for the frame of each bar
$b1plot->SetColor("navy");
$b2plot->SetColor("olivedrab");
$b3plot->SetColor("orangered");

//create the grouped bar plot
$gbplot = new GroupBarPlot (array($b1plot ,$b2plot ,$b3plot));

$graph->Add($gbplot);

// Finally send the graph to the browser
$graph->Stroke();
?>

Selamat! Tampilan grafik yang Anda buat akan seperti gambar di bawah ini

kirim ke teman | versi cetak


Share this

Related Posts

Previous
Next Post »