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.

    <?php
    include ("../jpgraph.php"); //Sesuaikam dengan folder Anda
    include ("../jpgraph_bar.php"); //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

    $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!  Anda telah selesai membuat grafik 3D… Selamat mencoba

2 responses to “Membuat Grafik Bar 3D dengan JPGraph, PHP, MyQL

  1. Do you mind if I quote a few of your articles as long as I provide credit and sources back to your webpage? My website is in the exact same area of interest as yours and my users would truly benefit from some of the information you present here. Please let me know if this alright with you. Many thanks!

Write Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s