How do I integrate Fusion Chart in CI?

[eluser]aryan_[/eluser]
I want to display Fusion Chart in my CI app. Is there any FC plugin available for CI?

Thanks!

[eluser]Eric Cope[/eluser]
This is the first time I have seen fusion chart. I will be using it in the future. When I write a library wrapper for it, I will let you know.

[eluser]n0xie[/eluser]
This works for me:

fusionchart_pi.php

Code:

<?php
// Page: FusionCharts.php
// Author: InfoSoft Global (P) Ltd.
// This page contains functions that can be used to render FusionCharts.


// encodeDataURL function encodes the dataURL before it's served to FusionCharts.
// If you've parameters in your dataURL, you necessarily need to encode it.
// Param: $strDataURL - dataURL to be fed to chart
// Param: $addNoCacheStr - Whether to add aditional string to URL to disable caching of data
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);
}


// datePart function converts MySQL database based on requested mask
// Param: $mask - what part of the date to return "m' for month,"d" for day, and "y" for year
// Param: $dateTimeStr - MySQL date/time format (yyyy-mm-dd HH:ii:ss)
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;
}


// renderChart renders the JavaScript + HTML code required to embed a chart.
// This function assumes that you've already included the FusionCharts JavaScript class
// in your page.

// $chartSWF - SWF File Name (and Path) of the chart which you intend to plot
// $strURL - If you intend to use dataURL method for this chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method)
// $strXML - If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method)
// $chartId - Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
// $chartWidth - Intended width for the chart (in pixels)
// $chartHeight - Intended height for the chart (in pixels)
// $debugMode - Whether to start the chart in debug mode
// $registerWithJS - Whether to ask chart to register itself with JavaScript
function renderChart($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode=false, $registerWithJS=false, $setTransparent="") {
    //First we create a new DIV for each chart. We specify the name of DIV as "chartId"Div.
    //DIV names are case-sensitive.

    // The Steps in the script block below are:
    //
    //  1)In the DIV the text "Chart" is shown to users before the chart has started loading
    //    (if there is a lag in relaying SWF from server). This text is also shown to users
    //    who do not have Flash Player installed. You can configure it as per your needs.
    //
    //  2) The chart is rendered using FusionCharts Class. Each chart's instance (JavaScript) Id
    //     is named as chart_"chartId".
    //
    //  3) Check whether we've to provide data using dataXML method or dataURL method
    //     save the data for usage below
    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 = boolToNum($debugMode);
    $nregisterWithJS = boolToNum($registerWithJS);
    $nsetTransparent=($setTransparent?"true":"false");


    // create a string for outputting by the caller
$render_chart = <<<RENDERCHART

    &lt;!-- START Script Block for Chart $chartId --&gt;
    <div id="$chartIdDiv" align="center">
        Chart.
    </div>
    [removed]
        //Instantiate the Chart
        var chart_$chartId = new FusionCharts("$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");
      chart_$chartId.setTransparent("$nsetTransparent");

        $tempData
        //Finally, render the chart.
        chart_$chartId.render("$chartIdDiv");
    [removed]
    &lt;!-- END Script Block for Chart $chartId --&gt;
RENDERCHART;

  return $render_chart;
}

Continued in next thread since it's too long

[eluser]n0xie[/eluser]
fusionchart_pi.php continued

Code:

//renderChartHTML function renders the HTML code for the JavaScript. This
//method does NOT embed the chart using JavaScript class. Instead, it uses
//direct HTML embedding. So, if you see the charts on IE 6 (or above), you'll
//see the "Click to activate..." message on the chart.
// $chartSWF - SWF File Name (and Path) of the chart which you intend to plot
// $strURL - If you intend to use dataURL method for this chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method)
// $strXML - If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method)
// $chartId - Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
// $chartWidth - Intended width for the chart (in pixels)
// $chartHeight - Intended height for the chart (in pixels)
// $debugMode - Whether to start the chart in debug mode
function renderChartHTML($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode=false,$registerWithJS=false, $setTransparent="") {
    // Generate the FlashVars string based on whether dataURL has been provided
    // or dataXML.
    $strFlashVars = "&chartWidth;=" . $chartWidth . "&chartHeight;=" . $chartHeight . "&debugMode;=" . boolToNum($debugMode);
    if ($strXML=="")
        // DataURL Mode
        $strFlashVars .= "&dataURL;=" . $strURL;
    else
        //DataXML Mode
        $strFlashVars .= "&dataXML;=" . $strXML;

    $nregisterWithJS = boolToNum($registerWithJS);
    if($setTransparent!=""){
      $nsetTransparent=($setTransparent==false?"opaque":"transparent");
    }else{
      $nsetTransparent="window";
    }
$HTML_chart = <<&lt;HTMLCHART
    &lt;!-- START Code Block for Chart $chartId --&gt;
    &lt;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&registerWithJS;=$nregisterWithJS" />
        <param name="quality" value="high" />
        <param name="wmode" value="$nsetTransparent" />
        &lt;embed src="$chartSWF" FlashVars="$strFlashVars&registerWithJS;=$nregisterWithJS" quality="high" width="$chartWidth" height="$chartHeight" name="$chartId" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="$nsetTransparent" /&gt;
    &lt;/object&gt;
    &lt;!-- END Code Block for Chart $chartId --&gt;
HTMLCHART;

  return $HTML_chart;
}

// boolToNum function converts boolean values to numeric (1/0)
function boolToNum($bVal) {
    return (($bVal==true) ? 1 : 0);
}

?&gt;

CONTROLLER

Code:

// $filename is a full path to the xml you want to 'chart'
// in my case http://somedomain.tld/public/xml/somegraph.xml
$data['XML_DATA'] =  $filename;

$this->load->plugin('fusionchart');
$this->load->view('chart_view',$data);

VIEW

Code:

<$cript language="javascript" type="text/javascript" src="/public/admin/js/FusionCharts.js">[removed]
&lt;?php echo renderChart($pathtotheswf, $XML_DATA, "", "chart1", 500, 350);?&gt;

An example XML to get you going. Obviously you could let this render by a generic model

Code:

<graph caption='Newsletter subscriptions' xAxisName='Day' yAxisName='Subscriptions' decimalPrecision='0' formatNumberScale='0'>
<set name='28' value='0' color='5494AF'/>
<set name='29' value='0' color='5494AF'/>
<set name='30' value='0' color='5494AF'/>
<set name='31' value='0' color='5494AF'/>
</graph>

Hope this helps.

[eluser]Juan Velandia[/eluser]
Hello Eveyone, I came up with an intersting charts solution, FusionCharts Free, It's easy to configure and i'ts well documented.

I did a small example over a CI deployment, you can download it:

http://190.146.3.147/CodeIgniter_1.7.2_chart.zip

Download it, adjust your base_url() in the config file and you can check it. I will leave it for the next few weeks.

I hope it could be useful for someone, It did the job for me.Regards!