Welcome Guest, Not a member yet? Register   Sign In
OpenFlashChart With CI
#1

[eluser]vcool[/eluser]
Using OpenFlashChart with CI

- Download OpenFlashChart at http://teethgrinder.co.uk/open-flash-chart/

- Create directory in CI root :
Code:
assets/
         --swf/
         --js/
- Extract OpenFlashChart to temporary folder

- Copy the php-ofc-library/open-flash-chart.php file to system/application/library/ and then rename it to graph.php

- Copy the open-flash-chart.swf file to assets/swf/

- Copy the js/swfobject.js to assets/js/

- Edit file graph.php, find this following lines :
Code:
$this->js_path = 'js/';
    $this->swf_path = '';
Edit to :
Code:
$this->js_path = base_url().'assets/js/';
      $this->swf_path = base_url().'assets/swf/';

- Example :

Contoller :
Code:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');


Class Statistic extends Controller {
    
    function Statistic(){
        parent::Controller();
        //$this->freakauth_light->check('user');
        
        //load the models
        $this->load->model('vouchermodel');
        $this->load->model('postpaidmodel');
        $this->load->model('billingplanmodel');
        $this->load->model('statisticmodel');
        
        //load radius helpers
        $this->load->helper('radius');
    }
    
    function index(){
        //security check
        $this->freakauth_light->check('user');
        
        $this->load->library('graph');
        
        //get billingplan
        $bp_qty = array();
        $bp_label = array();
        $data['billingplans'] = $this->billingplanmodel->getBillingPlanStat();
        foreach ($data['billingplans']->result() as $billingplan) {
            $bp_qty[] = $billingplan->qty;
            $bp_label[] = $billingplan->billingplan;
        }
        
        //PIE chart, 60% alpha
        //
        $this->graph->pie(80,'#505050','{font-size: 12px; color: #404040;');
        //
        // pass in two arrays, one of data, the other data labels
        //
        $this->graph->pie_values( $bp_qty, $bp_label );
        //
        // Colours for each slice, in this case some of the colours
        // will be re-used (3 colurs for 5 slices means the last two
        // slices will have colours colour[0] and colour[1]):
        //
        $this->graph->pie_slice_colours( array('#d9db35','#487daf','#d00000','#4ae331') );

        $this->graph->set_tool_tip( '#val# Vouchers' );
        $this->graph->bg_colour = '#040404';
        $this->graph->title( 'Voucher Created', '{font-size:14px; color: #7F7772}' );
        $this->graph->set_output_type('js');
        
                
        //get the vouchers data
        $data['voucher'] = $this->vouchermodel->getVoucherStatistics();
        
        //get the postpaid account data
        $data['postpaid'] =  $this->postpaidmodel->getAccountStatistic();
        
        //get the who's online list
        $data['onlineuser'] = radius_get_online_users();
        
        $data['title'] = "Hotspot Statistics";
        $data['h1'] = "Hotspot Statistics";
        
        //$this->output->enable_profiler();
        
        $this->load->view('statistic/statistic_view',$data);
    }
    
}

?>

view :
Code:
<?php $this->load->view('header') ?>

<h1>&lt;?=$h1?&gt;</h1>

<div id='voucher_info'>
<h3>Vouchers Info</h3>
<ul>
    <li><label>Vouchers Created</label>&lt;?=$voucher['created']?&gt;</li>
    <li><label>Used</label>&lt;?=$voucher['used']?&gt;</li>
    <li><label>Expired</label>&lt;?=$voucher['expired']?&gt;</li>
</ul>
<h3>Billing Plans</h3>
<ul>
    &lt;?php foreach($billingplans->result() as $row):?&gt;
    <li><label>&lt;?=$row->billingplan?&gt;</label>&lt;?=$row->qty?&gt;</li>
    &lt;?php endforeach; ?&gt;
</ul>
        <div id='graph'>
            &lt;?=$this->graph->render()?&gt;
        </div>
</div>


<div id='postpaid_info'>
<h3>Postpaid Account Info</h3>
<ul>
    <li><label>Account Created</label>&lt;?=$postpaid['created']?&gt;</li>
    <li><label>Used</label>&lt;?=$postpaid['used']?&gt;</li>
</ul>
</div>


&lt;? $this->load->view('footer'); ?&gt;

To find out of how to use OpenFlashChart in detail explanation, visit http://teethgrinder.co.uk/open-flash-chart/ .

cheers
-Rafeequl
#2

[eluser]Unknown[/eluser]
How to change chart width and height?

Quote:i got it
Code:
$this->graph->width = '500';
$this->graph->height = '500';
#3

[eluser]taewoo[/eluser]
vcool: I follwed your instructions but the HTML doesn't display the "embed" tag.. Are you missing a step?

My HTML looks like this: &title=Spoon+sales+2008,{font-size: 26px;}& &x_axis_steps=1& &y_ticks=5,10,6& &line=3,#87421F& &values=49,11,20,12,0,42,50,0,30,50,49,49& &x_labels=Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec& &y_min=0& &y_max=60&

No swf on the browser
#4

[eluser]taewoo[/eluser]
Ok I figured it out.

Add this helper file ('open_flash_chart_helper.php')
Code:
&lt;?php

function open_flash_chart_object( $width, $height, $url, $use_swfobject=true, $base='' )
{
    //
    // I think we may use swfobject for all browsers,
    // not JUST for IE...
    //
    //$ie = strstr(getenv('HTTP_USER_AGENT'), 'MSIE');
    
    //
    // escape the & and stuff:
    //
    $url = urlencode($url);
    
    //
    // output buffer
    //
    $out = array();
    
    //
    // check for http or https:
    //
    if (isset ($_SERVER['HTTPS']))
    {
        if (strtoupper ($_SERVER['HTTPS']) == 'ON')
        {
            $protocol = 'https';
        }
        else
        {
            $protocol = 'http';
        }
    }
    else
    {
        $protocol = 'http';
    }
    
    //
    // if there are more than one charts on the
    // page, give each a different ID
    //
    global $open_flash_chart_seqno;
    $obj_id = 'chart';
    $div_name = 'flashcontent';
    
    //$out[] = '';
    
    if( !isset( $open_flash_chart_seqno ) )
    {
        $open_flash_chart_seqno = 1;
        $out[] = '';
    }
    else
    {
        $open_flash_chart_seqno++;
        $obj_id .= '_'. $open_flash_chart_seqno;
        $div_name .= '_'. $open_flash_chart_seqno;
    }
    
    if( $use_swfobject )
    {
    // Using library for auto-enabling Flash object on IE, disabled-Javascript proof  
    $out[] = '<div id="'. $div_name .'"></div>';
    $out[] = '';
    $out[] = 'var so = new SWFObject("'. $base .'open-flash-chart.swf", "'. $obj_id .'", "'. $width . '", "' . $height . '", "9", "#FFFFFF");';
    //$out[] = 'so.addVariable("width", "' . $width . '");';
    //$out[] = 'so.addVariable("height", "' . $height . '");';
    $out[] = 'so.addVariable("data", "'. $url . '");';
    $out[] = 'so.addParam("allowScriptAccess", "sameDomain");';
    $out[] = 'so.write("'. $div_name .'");';
    $out[] = '';
    $out[] = '<noscript>';
    }

    $out[] = '&lt;object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="' . $protocol . '://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" ';
    $out[] = 'width="' . $width . '" height="' . $height . '" id="ie_'. $obj_id .'" align="middle"&gt;';
    $out[] = '<param name="allowScriptAccess" value="sameDomain" />';
    $out[] = '<param name="movie" value="'. $base .'open-flash-chart.swf?width='. $width .'&height;='. $height . '&data;='. $url .'" />';
    $out[] = '<param name="quality" value="high" />';
    $out[] = '<param name="bgcolor" value="#FFFFFF" />';
    $out[] = '&lt;embed src="'. $base .'open-flash-chart.swf?data=' . $url .'" quality="high" bgcolor="#FFFFFF" width="'. $width .'" height="'. $height .'" name="'. $obj_id .'" align="middle" allowScriptAccess="sameDomain" ';
    $out[] = 'type="application/x-shockwave-flash" pluginspage="' . $protocol . '://www.macromedia.com/go/getflashplayer" id="'. $obj_id .'"/&gt;';
    $out[] = '&lt;/object&gt;';

    if ( $use_swfobject ) {
    $out[] = '</noscript>';
    }
    
    return implode("\n",$out);
}
?&gt;

Then in your view

Code:
&lt;?php $this->load->helper("open_flash_chart"); ?&gt;
&lt;html&gt;
&lt;body&gt;
&lt;?= open_flash_chart_object( 500, 250, site_url('embed/graph_details'), false, js_url() ) ?&gt;
&lt;/body&gt;
&lt;/html&gt;

where 'embed/graph_details' is the controller that calls the

Code:
$this->graph->render();
#5

[eluser]edhrx[/eluser]
@vcool

Just downloaded v 1.9.2
but can't find your suggested edit. Is it version specific

$this->js_path = 'js/';
$this->swf_path = '';

best wishes
#6

[eluser]spheroid[/eluser]
@taewoo:

I'm having trouble with implementation. My graph is blank. Can you post an example in your controller of the functions? Thanks

(updated) Solved. Nevermind!
#7

[eluser]Bui Duc Long[/eluser]
check it @ http://v2.itconnect.com.vn Big Grin
#8

[eluser]BD-CI-Programmer[/eluser]
Very nice example.. Dear User.. Please visit
http://golamrobbany.wordpress.com/
I have solved it..
#9

[eluser]taewoo[/eluser]
Verrry nice
#10

[eluser]porksmash[/eluser]
Just a note, it looks like if you use the method in the first post (not the helper provided by taewoo, I haven't tried that yet), you MUST have some other HTML element in the page, or something in swfobject.js will fail, causing no graph to show, even though the code is on the page.

Does not work:
Code:
&lt;?php
    //PIE chart, 80% alpha
    $this->graph->pie(80,'#505050','{font-size: 12px; color: #404040;');
    // pass in two arrays, one of data, the other data labels
    $this->graph->pie_values( $values, $labels );
    // Colours for each slice, in this case some of the colours
    // will be re-used (3 colurs for 5 slices means the last two
    // slices will have colours colour[0] and colour[1]):
    $this->graph->pie_slice_colours( array('#d9db35','#487daf','#d00000','#4ae331') );
    
    $this->graph->set_tool_tip( '#val# Vouchers' );
    $this->graph->bg_colour = '#040404';
    $this->graph->title( 'Vouchers Created', '{font-size:14px; color: #7F7772}' );
    $this->graph->set_output_type('js');
?&gt;
&lt;?=$this->graph->render()?&gt;

Does work:
Code:
<h1>Test Graph</h1>
&lt;?php
    //PIE chart, 80% alpha
    $this->graph->pie(80,'#505050','{font-size: 12px; color: #404040;');
    // pass in two arrays, one of data, the other data labels
    $this->graph->pie_values( $values, $labels );
    // Colours for each slice, in this case some of the colours
    // will be re-used (3 colurs for 5 slices means the last two
    // slices will have colours colour[0] and colour[1]):
    $this->graph->pie_slice_colours( array('#d9db35','#487daf','#d00000','#4ae331') );
    
    $this->graph->set_tool_tip( '#val# Vouchers' );
    $this->graph->bg_colour = '#040404';
    $this->graph->title( 'Vouchers Created', '{font-size:14px; color: #7F7772}' );
    $this->graph->set_output_type('js');
?&gt;
&lt;?=$this->graph->render()?&gt;
The only difference between the two is that I added a h1 in the working example. These are views, by the way.

I like to do all the formatting/creation of the charts in the views in order to have more than 1 chart per page, and pass in the data arrays from the controller. I also copied the code in the constructor to a clear() function. It is used exactly like the table library's clear function and has the same purpose.
Code:
/**
* Resets all variables to initial state.
*/
function clear()
{
    $this->data_sets = array();
    
    $this->data = array();
    $this->links = array();
    $this->width = 250;
    $this->height = 200;
    $this->js_path = base_url().'assets/js/';
    $this->swf_path = base_url().'assets/swf/';
    $this->x_labels = array();
    $this->y_min = '';
    $this->y_max = '';
    $this->x_min = '';
    $this->x_max = '';
    $this->y_steps = '';
    $this->title = '';
    $this->title_style = '';
    $this->occurence = 0;
    
    $this->x_offset = '';

    $this->x_tick_size = -1;

    $this->y2_max = '';
    $this->y2_min = '';

    // GRID styles:
    $this->x_axis_colour = '';
    $this->x_axis_3d = '';
    $this->x_grid_colour = '';
    $this->x_axis_steps = 1;
    $this->y_axis_colour = '';
    $this->y_grid_colour = '';
    $this->y2_axis_colour = '';
    
    // AXIS LABEL styles:        
    $this->x_label_style = '';
    $this->y_label_style = '';
    $this->y_label_style_right = '';


    // AXIS LEGEND styles:
    $this->x_legend = '';
    $this->x_legend_size = 20;
    $this->x_legend_colour = '#000000';

    $this->y_legend = '';
    $this->y_legend_right = '';
    //$this->y_legend_size = 20;
    //$this->y_legend_colour = '#000000';

    $this->lines = array();
    $this->line_default['type'] = 'line';
    $this->line_default['values'] = '3,#87421F';
    $this->js_line_default = 'so.addVariable("line","3,#87421F");';
    
    $this->bg_colour = '';
    $this->bg_image = '';

    $this->inner_bg_colour = '';
    $this->inner_bg_colour_2 = '';
    $this->inner_bg_angle = '';
    
    // PIE chart ------------
    $this->pie = '';
    $this->pie_values = '';
    $this->pie_colours = '';
    $this->pie_labels = '';
    
    $this->tool_tip = '';
    
    // which data lines are attached to the
    // right Y axis?
    $this->y2_lines = array();
    
    // Number formatting:
    $this->y_format='';
    $this->num_decimals='';
    $this->is_fixed_num_decimals_forced='';
    $this->is_decimal_separator_comma='';
    $this->is_thousand_separator_disabled='';
    
    $this->output_type = '';
    
    //
    // set some default value incase the user forgets
    // to set them, so at least they see *something*
    // even is it is only the axis and some ticks
    //
    $this->set_y_min( 0 );
    $this->set_y_max( 20 );
    $this->set_x_axis_steps( 1 );
    $this->y_label_steps( 5 );
}

Thanks to everyone above for their work!




Theme © iAndrew 2016 - Forum software by © MyBB