Integrasi dreamweaver dan mysql untuk membuat grafik menggunakan amchart

Bukan promosi amchart lhooo….tapi ini semata-mata hanya karena saya biasa menggunakan dan mudah dimodifikasi menggunakan dreamweaver. Saya asumsikan pembaca sudah familier menggunakan dreamweaver, maksudnya tau cara create site, create recordset dsb.

Ok langsung saja buat page di dreamweaver, dan kita create recordset, dalam kasus ini recordset kita beri nama statkunjungan_rec. Sedangkan amchart dalam kasus ini saya gunakan versi 1.5. Chart yang saya pilih adalah tipe amline untuk menampilkan grafik jumlah kunjungan per-tanggal kedatangan. Contoh perintah dari situs amchart untuk memanggil chart line adalah sbb

  <script type="text/javascript" src="../amline/swfobject.js"></script>
	<div id="flashcontent1">
		<strong>You need to upgrade your Flash Player</strong>
	</div>

	<script type="text/javascript">
		// <![CDATA[		
		var so = new SWFObject("../amline/amline.swf", "amline1", "260", "200", "8", "#FFFFFF");
		so.addVariable("path", "../amline/");
		so.addVariable("settings_file", escape("amline/amline4/amline_settings1.xml"));
		so.addVariable("data_file", escape("amline/amline4/amline_data1.txt"));
//	so.addVariable("chart_data", "");
		so.addVariable("preloader_color", "#000000");
		so.write("flashcontent1");
		// ]]>
	</script>

pada listing script diatas, data yang dipanggil dalam bentuk amline_data1.txt. Setelah dicek ternyata isinya berupa looping data yang dipisahkan tanda titik koma untuk memisahkan antara axis dan ordinat chartnya. Sehingga apabila kita ingin integrasikan dengan recordset bawaan dreamweaver perlu ada sedikit modifikasi. Tahapannya adalah sbb :

1. Ubah dengan benar alamat link lokasi setting, misalnya link ke swfobject.swf, amline_settings1.xml dsb
2. Nonaktifkan pemanggilan “data_file” dengan memberi tanda komentar (//) di sebelah kiri
3. Aktifkan “chart_data” dengan menghilangkan tanda komentar di sebelah kiri
4. Panggil perulangan data dari recordset dreamweaver dengan do….while….. sbb:

<?php do {
echo date(‘d-m-Y’, strtotime($row_statkunjungan_rec[‘tgl’])); ?>;<?php echo $row_statkunjungan_rec[‘jml_kunjungan’].’\n’;
} while ($row_statkunjungan_rec = mysql_fetch_assoc($statkunjungan_rec)); ?>

Perintah ini akan menghasilkan looping data tgl;jml_kunjungan dan perbaris dipisahkan dengan ‘\n

Sehingga listing lengkapnya adalah sbb :

<script type="text/javascript" src="path_to_file/swfobject.js"></script>
<!-- this id must be unique! -->
<div id="flashcontent_cari" style="position:relative">
</div>

<script type=”text/javascript”>
// <![CDATA[
var so = new SWFObject(“path_to_file/amline.swf”, “amline1”, “650”, “300”, “8”, “#FFFFFF”);
so.addVariable(“path”, “path_to_file/amline/”);
so.addVariable(“settings_file”, encodeURIComponent(“path_to_file/amline_kunjungan.xml”));
//so.addVariable(“data_file”, encodeURIComponent(“amline_data1.txt”));
so.addVariable(“chart_data”,”<?php do {
        echo date(‘d-m-Y’, strtotime($row_statkunjungan_rec[‘tgl’])); ?>;<?php echo $row_statkunjungan_rec[‘jml_kunjungan’].’\n’;
        } while ($row_statkunjungan_rec = mysql_fetch_assoc($statkunjungan_rec)); ?>”);
so.write(“flashcontent_cari”);  // this id must match the div id above
// ]]>
</script>

Mudah-mudahan membantu 🙂

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s