Langkah Pertama buat CODINGNYA seperti di bawah ini :
-------------------------------------------------------------
<?php
include "fungsi_indotgl.php";
mysql_connect("localhost", "root", "") ;
mysql_select_db("nama_database");
$result = mysql_query("SELECT bulan,total_penjualan, SUM(total_penjualan) as total FROM penjualan GROUP BY bulan");
echo "<graph caption='Annual Sales Summary (2004 - 2007)' xAxisName='Month' yAxisName='Logistic' numberPrefix=''>";
$colors = array('AFD8F8','F6BD0F','8BBA00','FF8E46','008E8E','D64646','8E468E','588526','B3AA00','008ED6','9D080D','A186BE','CC6600','FDC689','ABA000','F26D7D','FFF200','0054A6','F7941C','CC3300','006600','663300','6DCFF6');
$no=0;
while ($data = mysql_fetch_array($result)) {
$bulan=konversi_bulan($data[bulan]);
echo "<set name='$bulan' value='$data[total_penjualan]' color='$colors[$no]' />";
$no++;
}
echo "</graph>";
?>
Simpan dengan nama grafik.php
---------------------------------
langlah kedua buat fungsi tanggal untuk konversi dari bulan (03 ke Maret).
---------------------------------
<?php
function konversi_bulan($bln){
switch ($bln){
case 1:
return "Januari";
break;
case 2:
return "Februari";
break;
case 3:
return "Maret";
break;
case 4:
return "April";
break;
case 5:
return "Mei";
break;
case 6:
return "Juni";
break;
case 7:
return "Juli";
break;
case 8:
return "Agustus";
break;
case 9:
return "September";
break;
case 10:
return "Oktober";
break;
case 11:
return "November";
break;
case 12:
return "Desember";
break;
}
}
?>
Simpan dengan nama fungsi.indotgl.php
langkah ke tiga buat indexnya
------------------------------
<html>
<head>
<title>Sample grafik</title>
<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
<script type="text/javascript" src="JS/jquery.fusioncharts.js"></script>
<SCRIPT LANGUAGE="Javascript" SRC="JS/FusionCharts.js"></SCRIPT>
</head>
<body>
<center>
<span id="myChart1Container">Loading FusionCharts!</span>
<span id="myChart2Container">Loading FusionCharts!</span>
<script type="text/javascript">
$('#myChart1Container').insertFusionCharts({
swfPath: "Charts/",
id: "chart1",
width: "600",
height: "400",
type: "Column3D",
data: "grafik.php",
dataFormat: "URIData"
});
$('#myChart2Container').insertFusionCharts({
swfPath: "Charts/",
id: "chart2",
width: "700",
height: "500",
type: "Pie3D",
data: "grafik.php",
dataFormat: "URIData"
});
</script>
</center>
</body>
</html>
------------------------
simpan dengan nama index.php
langkah terakhir download file Charts Disini
 |
| Contoh Screenshot |
Jika ada kesulitan dengan tutorial diatas silahkan tinggalkan komentar ,
semoga dapat membantu
Post a Comment