Part of the EllisLab Network
   
 
OpenFlashChart With CI
Posted: 05 March 2008 09:53 AM   [ Ignore ]  
Summer Student
Total Posts:  7
Joined  10-30-2007

Using OpenFlashChart with CI

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

- Create directory in CI root :

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 :

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

Edit to :

$this->js_path = base_url().'assets/js/';
      
$this->swf_path = base_url().'assets/swf/';

- Example :

Contoller :

<?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 :

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

<h1><?=$h1?></h1>

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


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


<? $this->load->view('footer'); ?>

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

cheers
-Rafeequl

 Signature 

http://rafeequl.wordpress.com
Strugling in the jungle

Profile
 
 
Posted: 02 April 2008 07:09 PM   [ Ignore ]   [ # 1 ]  
Summer Student
Avatar
Total Posts:  1
Joined  03-18-2008

How to change chart width and height?

i got it

$this->graph->width = '500';
$this->graph->height = '500';

Profile
 
 
Posted: 08 April 2008 09:14 PM   [ Ignore ]   [ # 2 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  186
Joined  01-25-2008

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

 Signature 

Kick-Ass Real Estate Widgets
http://www.redmol.com/page/widget - written with CI

Profile
 
 
Posted: 09 April 2008 04:17 PM   [ Ignore ]   [ # 3 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  186
Joined  01-25-2008

Ok I figured it out.

Add this helper file (’open_flash_chart_helper.php’)

<?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[]
= '<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">';
    
$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[] = '<embed src="'. $base .'open-flash-chart.swf?data=' . $url .'" quality="high" bgstyle="color: #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 .'"/>';
    
$out[] = '</object>';

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

Then in your view

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

where ‘embed/graph_details’ is the controller that calls the

$this->graph->render();

 Signature 

Kick-Ass Real Estate Widgets
http://www.redmol.com/page/widget - written with CI

Profile
 
 
Posted: 10 April 2008 08:48 AM   [ Ignore ]   [ # 4 ]  
Grad Student
Rank
Total Posts:  48
Joined  09-29-2007

@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

Profile
 
 
Posted: 23 April 2008 05:07 PM   [ Ignore ]   [ # 5 ]  
Grad Student
Rank
Total Posts:  52
Joined  09-26-2007

@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!

Profile
 
 
Posted: 24 April 2008 04:17 AM   [ Ignore ]   [ # 6 ]  
Summer Student
Total Posts:  3
Joined  07-15-2007

check it @ http://v2.itconnect.com.vn :D

Profile
 
 
Posted: 24 April 2008 05:58 AM   [ Ignore ]   [ # 7 ]  
Grad Student
Rank
Total Posts:  44
Joined  04-01-2008

Very nice example.. Dear User.. Please visit
http://golamrobbany.wordpress.com/
I have solved it..

 Signature 

----------
BD-CodeIgniter-Programmer

Profile
 
 
Posted: 24 April 2008 10:35 AM   [ Ignore ]   [ # 8 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  186
Joined  01-25-2008

Verrry nice

 Signature 

Kick-Ass Real Estate Widgets
http://www.redmol.com/page/widget - written with CI

Profile
 
 
Posted: 06 May 2008 01:45 PM   [ Ignore ]   [ # 9 ]  
Summer Student
Total Posts:  5
Joined  03-02-2008

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:

<?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');
?>
<?
=$this->graph->render()?>

Does work:

<h1>Test Graph</h1>
<?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');
?>
<?
=$this->graph->render()?>

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.

/**
* 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!

Profile
 
 
Posted: 06 May 2008 05:02 PM   [ Ignore ]   [ # 10 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  431
Joined  12-13-2007

I should be posting our OpenFlashChart Library very shortly which should make the integration that bit more easier smile

 Signature 

PX Webdesign | The Lab | Personal Blog

Profile
 
 
Posted: 06 May 2008 07:15 PM   [ Ignore ]   [ # 11 ]  
Summer Student
Total Posts:  5
Joined  03-02-2008

Very cool, post here to let us know where it’s at when you do!

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 719, on June 06, 2008 10:16 AM
Total Registered Members: 60711 Total Logged-in Users: 17
Total Topics: 73163 Total Anonymous Users: 1
Total Replies: 394596 Total Guests: 347
Total Posts: 467759    
Members ( View Memberlist )
Active Members:    awptiazulcmbojackCrucialDark Preacherinparojacksonj04JoostVjtkendallLuci3nMgM WebmwmerzNachoredwizSabotsocstix