Realtime Chart Without Page Refresh Using AJAX Technique. (Part 3)

30 11 2010

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> &nbsp;
</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> &nbsp;
</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> &nbsp;
</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> &nbsp;
</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> &nbsp;
</td>
<td width='20%' align='center'>
<input type='text' size='8' name='E'>
</td>
</tr>
<tr>
<td width='20%' align='center'>&nbsp;
<b>Plot Data</b>
</td>
<td width='20%' align='center'>
<input type='submit' value='Plot Now!'>
</td>
</tr>
</table>
</FORM>
<H5 >(c) <a href='https://localhost80.wordpress.com/'>https://localhost80.wordpress.com/</a></h5&gt;
</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='https://localhost80.wordpress.com/'>https://localhost80.wordpress.com/</a></h5&gt;
</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

Thanks To

  • GOD (for Idea n Inspiration)
  • Family (for ur affection)
  • My Friends (for discussion)

Actions

Information

2 responses

23 06 2011
luke

Mana episode selanjutnya ??? Realtime Chart Without Page Refresh Using AJAX Technique. (Part 4)

23 06 2011
heru widakdo

Leave a Reply

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




%d bloggers like this: