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 ! (^-^)/

1 Comment »

  1. eRNo Gravatar 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.

RSS feed for comments on this post · TrackBack URL

Leave a Comment