Open Flash Chart (OFC) merupakan penampil grafik yang keren, kecuali jika Anda anti-flash. OFC dapat digunakan sebagai plugin dalam website Joomla (baca ini) namun bisa dipakai secara terpisah. Namun seperti halnya penampil chart lain, bagi pemula, OFC tidak mudah. Bahkan sebagai plugin Joomla pun, OFC bisa menghasilkan chart jika datanya diinput manual padahal sebagian besar pengguna chart memerlukan penampil chart yang mengambil data dari database.
Berikut ini tutorial menggunakan OFC dengan database untuk pemula.
Inspirasi diambil dari http://www.john-north.com/nathfy/AttC/ yang memakai OFC dengan auto table. Namun data tetap diinput secara manual. Kita hanya perlu membuatnya konek dengan database.
Silakan download auto-table OFC dari John North. DOWNLOAD.
Untuk database, sebagai sample, silakan dump sql tabel ini di phpmyadmin.
CREATE TABLE IF NOT EXISTS `tps` (
`id` int(5) NOT NULL AUTO_INCREMENT,
`nama_psgn` varchar(100) NOT NULL,
`tps1` int(11) NOT NULL,
`tps2` int(11) NOT NULL,
`tps3` int(11) NOT NULL,
`tps4` int(11) NOT NULL,
`tps5` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `tps`
--
INSERT INTO `tps` (`id`, `nama_psgn`, `tps1`, `tps2`, `tps3`, `tps4`, `tps5`) VALUES
(1, 'satudua', 2800, 600, 7500, 500, 1100),
(2, 'tigaempat', 1726, 1002, 102, 546, 1000);
Dalam folder hasil download sebelumnya ada file "example.htm" dan folder "css" serta "js". Biarkan saja.
Buat file, "sourcechart.php".
Isikan kode ini untuk membuat tabel dari tabel "tps" di database sebagai sumber chart:
<?php
mysql_connect("localhost","root","");
mysql_select_db("db") or die(mysql_error());
$query = "SELECT * FROM tps";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<tr><td>" .$data['nama_psgn'] ."</td><td>" .$data['tps1'] ."</td><td>" .$data['tps2'] ."</td><td>" .$data['tps3'] ."</td><td>" .$data['tps4'] ."</td><td>" .$data['tps5'] ."</td></tr>";
}
?>
Selanjutnya, kita membuat "index.php".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<title>Auto-table-to-chart example page</title>
<meta name="description" content="Auto-table-to-chart example page" />
<meta name="keywords" content="Truancy Call" />
<style type="text/css">
@import url(css/flash_chart_style.css);
@import url(css/example.css);
</style>
<script src="/js/jquery/jquery.js" type="text/JavaScript"></script>
<script src="/js/openflashchart/js/swfobject.js" type="text/JavaScript"></script>
<script type="text/javascript" src="/js/openflashchart/js/json2.js"></script>
<script type="text/javascript" src="/js/attc.js"></script>
</head>
<body>
<div class="middle_content">
<table class="fixed_tds graph_table chart_type_bar_3d" id="sometotals2" summary="Some totals for this report">
<caption>Hasil Polling</caption>
<thead><tr>
<th class="graph_id" width=100px title=Pasangan>Pasangan</th>
<th class="graph_value" width=50px title="TPS 1">TPS 1</th>
<th class="graph_value" width=50px title="TPS 2">TPS 2</th>
<th class="graph_value" width=50px title="TPS 3">TPS 3</th>
<th class="graph_value" width=50px title="TPS 4">TPS 4</th>
<th class="graph_value" width=50px title="TPS 5">TPS 5</th>
</tr></thead> <tbody>
<?php
include "sourcechart.php";
?>
</tbody></table>
</div>
</body>
</html>
Done.
Hasilnya seperti di bawah ini:
