Halo para pembaca setia blog localhost80, semoga tidak bosan-bosannya membaca tulisan ini. Apalagi ini adalah tulisan ketiga dengan judul yang sama, semoga saja tidak bosan. Kalau pun bosan dan sudah pernah menemui artikel atau tulisan dengan tema yang sama (Realtime Chart with fusioncharts) silahkan sesegera mungkin untuk menekan tombol keyboard ALT+F4 (kalo bacanya dari hp gmana donk???) ya dibuang aja tuh hp-nya. (ntar saya yang ambil di tempat sampah).
Bagi pembaca yang tidak mengikuti tulisan di episode sebelumnya, silahkan klik disini untuk episode-1 dan klik disini untuk episode-2. Lho, kok kayak sinetron aja sih…. episodenya banyak bangettt…. tenang aja, ga banyak kok… ga kayak sinetron-sinetron yang sangat mendidik itu.
Di bagian ketiga ini saya akan mencoba menghidangkan sebuah grafik dengan fusioncharts tentunya, yang akan digabungkan dengan bahasa pemrograman PHP. Seperti tulisan dibagian kedua, hanya menggunakan HTML untuk menampilkan grafik tersebut kedalam tampilan website dengan sumber data yang diambil dari XML data. Dengan PHP kita dapat menampilkan grafik dengan sumber data yang berasal dari basis data (Database) sehingga lebih cepat dan efisien. Selain sumber data yang berasal dari database, kita juga dapat membuat sebuah form (formulir) atau bahasa kerennya kotak isian yang dapat kita isi dengan data-data tanpa disimpan terlebih dahulu di basis data (langsung di plot ke dalam bentuk grafik). sebagai pemanasan silahkan ketikkan beberapa bait source code dibawah ini. Persiapannya sama seperti yang lalu, yaitu laptop atau komputer, perangkat lunak Apache-PHP-Mysql, text editor, kemauan belajar, snack buat ngemil, secangkir kopi hitam (kalau ada) dan sebatang rokok (kalo doyan n ga pengen umurnya pendek) sebagai penambah inspirasi.
note : Pada contoh kali ini, saya akan menyajikan sebuah grafik dengan sumber data yang kita isikan terlebih dahulu ke dalam form isian.
Source Code I (Membuat Tampilan Form)
<HTML>
<HEAD>
<TITLE>
Form Based Data Charting Example
</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="FusionCharts.js"></SCRIPT>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.text{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER><br><br>
<b><u>Form Based Data Charting Example</u></b><br><br>
<FORM ACTION='results.php' METHOD='POST'>
<table width='20%' align='center' cellpadding='2' cellspacing='1' border='2' class='text'>
<tr>
<td width='20%' align='center'>
<B>Data A</B>
</td>
<td width='20%' align='center'>
<input type='text' size='8' name='A'>
</td>
</tr>
<tr>
<td width='20%' align='center'>
<B>Data B</B>
</td>
<td width='20%' align='center'>
<input type='text' size='8' name='B'>
</td>
</tr>
<tr>
<td width='20%' align='center'>
<B>Data C</B>
</td>
<td width='20%' align='center'>
<input type='text' size='8' name='C'>
</td>
</tr>
<tr>
<td width='20%' align='center'>
<B>Data D</B>
</td>
<td width='20%' align='center'>
<input type='text' size='8' name='D'>
</td>
</tr>
<tr>
<td width='20%' align='center'>
<B>Data E</B>
</td>
<td width='20%' align='center'>
<input type='text' size='8' name='E'>
</td>
</tr>
<tr>
<td width='20%' align='center'>
<b>Plot Data</b>
</td>
<td width='20%' align='center'>
<input type='submit' value='Plot Now!'>
</td>
</tr>
</table>
</FORM>
<H5 >(c) <a href='http://localhost80.wordpress.com/'>http://localhost80.wordpress.com/</a></h5>
</CENTER>
</BODY>
</HTML>
Results I
Source Code II (Pemroses Tampilan Grafik)
<?php
include("FusionCharts.php");
?>
<HTML>
<HEAD>
<TITLE>
Form Based Data Charting Example
</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="FusionCharts.js"></SCRIPT>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.text{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<b><u>Form Based Data Charting Example</u></b><br><br>
<?php
$intdata1 = $_POST['A'];
$intdata2 = $_POST['B'];
$intdata3 = $_POST['C'];
$intdata4 = $_POST['D'];
$intdata5 = $_POST['E'];
$strXML = "<graph caption='Ploting Graph' subCaption='form based Data' showPercentValues='1' showPercentageInLabel='1' pieSliceDepth='50' showBorder='1' decimalPrecision='0' showNames='1'>";
$strXML .= "<set name='A' value='" . $intdata1 . "' />";
$strXML .= "<set name='B' value='" . $intdata2 . "' />";
$strXML .= "<set name='C' value='" . $intdata3 . "' />";
$strXML .= "<set name='D' value='" . $intdata4 . "' />";
$strXML .= "<set name='E' value='" . $intdata5 . "' />";
$strXML .= "</graph>";
echo renderChart("FCF_Pie3D.swf", "", $strXML, "data", 800, 500);
?>
<H5 >(c) <a href='http://localhost80.wordpress.com/'>http://localhost80.wordpress.com/</a></h5>
</CENTER>
</BODY>
</HTML>
Results II
Kalo kawan-kawan masih bingung, silahkan mengunduh file yang sudah saya sertakan di tautan berikut ini dapat dimodifikasi sesuai keinginan dan kreativitas anda. Semoga tulisan ini bermanfaat bagi kita semua, tak lupa penulis mengucapkan terima kasih atas waktu yang telah disisihkan untuk membaca tulisan sederhana ini. Saran dan kritik sangat diharapkan untuk pembenahan kedepan. Untuk tulisan bagian selanjutnya (part 4) kita akan mencoba membahas grafik dengan sumber data yang berasal dari basis data (database). Sekian dan terimakasih……
MERDEKA!!!!!
(Bersambung…..)
Episode Selanjutnya :
Realtime Chart Without Page Refresh Using AJAX Technique. (Part 4)
Regards
Soerabaja, 01-12-2010
Refference
- http://google.co.id/
- http://id-wikipedia.org/
- http://fusioncharts.com/
- fusioncharts documentation.
Thanks To
- GOD (for Idea n Inspiration)
- Family (for ur affection)
- My Friends (for discussion)
Mana episode selanjutnya ??? Realtime Chart Without Page Refresh Using AJAX Technique. (Part 4)
Silahkan bung luke http://localhost80.wordpress.com/2011/01/17/dynamic-chart-fluctuation-using-ajax-technique/
Sengaja judul saya ganti lebih spesifik