FusionCharts + CodeIgniter
FusionCharts adalah komponen pemetaan dalam basis flash yang dapat digunakan untuk merender data dalam bentuk animasi grafik. Dengan basis Adobe Flash 8, FusionCharts dapat digunakan dengan berbagai macam bahasa scripting web seperti HTML, .NET, ASP, JSP, PHP, ColdFusion dan lain sebagainya, untuk menghasilkan chart yang interaktif dan powerfull. Menggunakan XML sebagai data interface-nya, FusionCharts mampu menciptakan charts yang compact, interaktif, dan visually-arresting.
Untuk lebih jelasnya tentang FusionCharts dapat diakses situs resminya di www.fusioncharts.com.
Berikut tata cara menggabungkan FusionCharts dengan CodeIgniter :
Download CodeIgniter di sini (versi 1.5+) .
Download FusionChart di sini (versi 2.+) .
Ketik kode pemrograman berikut dan simpan ke folder CodeIgniter di :
system -> application ->libraries
dengan nama fusioncharts.php
Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); // Page: FusionCharts.php // Author: InfoSoft Global (P) Ltd. // This page contains functions that can be used to render FusionCharts. class Fusioncharts { public function __construct(){ } public function encodeDataURL($strDataURL, $addNoCacheStr=false) { //Add the no-cache string if required if ($addNoCacheStr==true) { // We add ?FCCurrTime=xxyyzz // If the dataURL already contains a ?, we add &FCCurrTime=xxyyzz // We replace : with _, as FusionCharts cannot handle : in URLs if (strpos(strDataURL,"?")<>0) $strDataURL .= "&FCCurrTime=" . Date("H_i_s"); else $strDataURL .= "?FCCurrTime=" . Date("H_i_s"); } // URL Encode it return urlencode($strDataURL); } public function datePart($mask, $dateTimeStr) { @list($datePt, $timePt) = explode(" ", $dateTimeStr); $arDatePt = explode("-", $datePt); $dataStr = ""; // Ensure we have 3 parameters for the date if (count($arDatePt) == 3) { list($year, $month, $day) = $arDatePt; // determine the request switch ($mask) { case "m": return $month; case "d": return $day; case "y": return $year; } // default to mm/dd/yyyy return (trim($month . "/" . $day . "/" . $year)); } return $dataStr; } public function renderChart($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode, $registerWithJS) { if ($strXML=="") $tempData = "//Set the dataURL of the chart\n\t\tchart_$chartId.setDataURL(\"$strURL\")"; else $tempData = "//Provide entire XML data using dataXML method\n\t\tchart_$chartId.setDataXML(\"$strXML\")"; // Set up necessary variables for the RENDERCAHRT $chartIdDiv = $chartId . "Div"; $ndebugMode = $this->boolToNum($debugMode); $nregisterWithJS = $this->boolToNum($registerWithJS); // create a string for outputting by the caller $render_chart = <<<RENDERCHART <!-- START Script Block for Chart $chartId --> <div id="$chartIdDiv" align="center"> Chart. </div> <script type="text/javascript"> //Instantiate the Chart var chart_$chartId = new FusionCharts("$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS"); $tempData //Finally, render the chart. chart_$chartId.render("$chartIdDiv"); </script> <!-- END Script Block for Chart $chartId --> RENDERCHART; return $render_chart; } public function renderChartHTML($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode) { // Generate the FlashVars string based on whether dataURL has been provided // or dataXML. $strFlashVars = "&chartWidth=" . $chartWidth . "&chartHeight=" . $chartHeight . "&debugMode=" . $this->boolToNum($debugMode); if ($strXML=="") // DataURL Mode $strFlashVars .= "&dataURL=" . $strURL; else //DataXML Mode $strFlashVars .= "&dataXML=" . $strXML; $HTML_chart = <<<HTMLCHART <!-- START Code Block for Chart $chartId --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="$chartWidth" height="$chartHeight" id="$chartId"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="$chartSWF"/> <param name="FlashVars" value="$strFlashVars" /> <param name="quality" value="high" /> <embed src="$chartSWF" FlashVars="$strFlashVars" quality="high" width="$chartWidth" height="$chartHeight" name="$chartId" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!-- END Code Block for Chart $chartId --> HTMLCHART; return $HTML_chart; } // boolToNum function converts boolean values to numeric (1/0) public function boolToNum($bVal) { return (($bVal==true) ? 1 : 0); } public function setDataXML($arrData,$caption = '',$numberPrefix) { $strXML = "<chart caption='".$caption."' numberPrefix='".$numberPrefix."' formatNumberScale='0'>"; //Convert data to XML and append foreach ($arrData as $arSubData) $strXML .= "<set label='" . $arSubData[1] . "' value='" . $arSubData[2] . "' />"; //Close <chart> element $strXML .= "</chart>"; return $strXML ; } } ?> |
Kode di atas diambil dari hasil extract unduhan FusionChart yang diambil dari folder :
Code -> php -> Includes -> FusionCharts.php
dengan beberapa modifikasi yang telah disesuaikan.
Ambil beberapa file penting di FusionCharts, di antaranya :
Code -> FusionCharts -> FusionCharts.js
Code -> FusionCharts -> *.swf
Simpan yang *.js ke folder CodeIgniter :
public -> javascripts
Simpan yang *.swf ke folder CodeIgniter :
public -> flash
Jika tidak ada folder-folder tersebut di CodeIgniter maka buatlah sendiri folder-folder tersebut.
Ketik kode berikut pada view dan simpan dengan nama charts.php.
Code :
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<<!-- FUSION CHARTS -->
<script type="text/javascript" src="<?=base_url();?>public/javascripts/FusionCharts.js"></script>
</head>
<body>
<?php
echo $graph ;
?>
</body>
</html> |
Terakhir, ketik kode berikut pada controller dengan nama tes.php.
Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php class Tes extends Controller { public $swfCharts ; public function __construct() { parent::Controller() ; $this->load->helper('url') ; $this->load->library('fusioncharts') ; $this->swfCharts = base_url().'public/flash/Column3D.swf' ; } public function index() { //Store Name of Products $arrData[0][1] = "Product A"; $arrData[1][1] = "Product B"; $arrData[2][1] = "Product C"; $arrData[3][1] = "Product D"; $arrData[4][1] = "Product E"; $arrData[5][1] = "Product F"; //Store sales data $arrData[0][2] = 567500; $arrData[1][2] = 815300; $arrData[2][2] = 556800; $arrData[3][2] = 734500; $arrData[4][2] = 676800; $arrData[5][2] = 648500; $strXML = $this->fusioncharts->setDataXML($arrData,'','Rp') ; $data['graph'] = $this->fusioncharts->renderChart($this->swfCharts,'',$strXML,"productSales", 600, 300, false, false) ; $this->load->view('charts',$data) ; } } ?> |
Jalankan. Dan jika benar maka output yang keluar di browser adalah sebagai berikut :
Good Luck ! (^-^)/

eR
said,
August 22, 2008 at 6:47 pm
nice-nice
tapi bentuknya flash ye, klo si user g ada flash player/plugin, gak muncul tuh gambar ??
ada banyak library di CI, untuk 1 jenis library aja ada banyak nama,
pusing klo dibaca satu-satu, trus cari yg sesuai, mending denger dari temen yg dah berpengalam aja d
bisa bikinin list libarary yg biasa lo pake ga ??
kayak buat auth pake redux/FAL/simplelogin dll.
template pake TBS,template,dll
session obsession,dbsession,dll
dll.