Part of the EllisLab Network
   
1 of 2
1
OpenFlashChart With CI
Posted: 05 March 2008 08:53 AM   [ Ignore ]  
Summer Student
Total Posts:  8
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 06: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 08:14 PM   [ Ignore ]   [ # 2 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  287
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 

http://PawshPal.com/ - Pets Rule

Profile
 
 
Posted: 09 April 2008 03:17 PM   [ Ignore ]   [ # 3 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  287
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 

http://PawshPal.com/ - Pets Rule

Profile
 
 
Posted: 10 April 2008 07:48 AM   [ Ignore ]   [ # 4 ]  
Grad Student
Rank
Total Posts:  53
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 04:07 PM   [ Ignore ]   [ # 5 ]  
Grad Student
Rank
Total Posts:  78
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 03:17 AM   [ Ignore ]   [ # 6 ]  
Summer Student
Total Posts:  14
Joined  07-15-2007

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

Profile
 
 
Posted: 24 April 2008 04:58 AM   [ Ignore ]   [ # 7 ]  
Grad Student
Rank
Total Posts:  62
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 09:35 AM   [ Ignore ]   [ # 8 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  287
Joined  01-25-2008

Verrry nice

 Signature 

http://PawshPal.com/ - Pets Rule

Profile
 
 
Posted: 06 May 2008 12: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 04:02 PM   [ Ignore ]   [ # 10 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  443
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 06: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
 
 
Posted: 19 September 2008 03:10 PM   [ Ignore ]   [ # 12 ]  
Grad Student
Rank
Total Posts:  32
Joined  03-11-2008

Have any of you guys checked this in IE7?
For me it works fine in Firefox, but when I look in IE7 I just get:
“C:\Users\John\Documents\flash\svn\data-files\data-47.txt” which is obviously hard coded somewhere

Profile
 
 
Posted: 17 November 2008 05:42 PM   [ Ignore ]   [ # 13 ]  
Summer Student
Total Posts:  1
Joined  11-13-2008

Hi,
I’ve a problem in implementing the Open Flash Chart (the file open-flash-chart-2-hyperion.zip from the official site). Sorry for the too great details in my question, but I don’t know as to explain my difficulties in other way.

I made a copy of the following files:

1) version-2/open-flash-chart.swf in the root of codeigniter

2) version-2/js/swfobject.js in codeigniter/js.

3) version-2/php5-ofc-library/open-flash-chart-object.php in system/application/helpers/ and I renamed this file as open-flash-chart_helper.php

4) version-2/php-ofc-library/open-flash-chart.php in system/application/libraries/ and I renamed this file as graph.php and its class open_flash_chart as graph:

5) because of include_once in the file graph.php, I copied also the other files from version-2/php-ofc-library/ in the same directory where I put the graph.php (system/application/libraries).

Here is the list of the files:

json_format.php
JSON.php
ofc_area_base.php
ofc_area_hollow.php
ofc_area_line.php
ofc_bar_3d.php
ofc_bar_base.php
ofc_bar_filled.php
ofc_bar_glass.php
ofc_bar.php
ofc_bar_sketch.php
ofc_bar_stack.php
ofc_hbar.php
ofc_line_base.php
ofc_line_dot.php
ofc_line_hollow.php
ofc_line.php
ofc_line_style.php
ofc_pie.php
ofc_radar_axis_labels.php
ofc_radar_axis.php
ofc_radar_spoke_labels.php
ofc_scatter_line.php
ofc_scatter.php
ofc_shape.php
ofc_title.php
ofc_tooltip.php
ofc_upload_image.php
ofc_x_axis_label.php
ofc_x_axis_labels.php
ofc_x_axis.php
ofc_x_legend.php
ofc_y_axis_base.php
ofc_y_axis.php
ofc_y_axis_right.php
ofc_y_legend.php


Then I created the controller example.php:

<?php
class Example extends Controller
{
    
function __construct()
    
{
        parent
::Controller();

        
$this->load->helper("open-flash-chart");
        
$this->load->library("graph");
    
}

    
function index()
    
{
        $this
->load->view("graph_view");
    
}

    
function chart()
    
{
        $label
= array('IE','Firefox','Opera','Wii','Other');
        
$data = array();
        
srand((double)microtime()*1000000);

        for(
$i=0; $i<5; $i++ )
        
{
            $data[]
= rand(5,15);
        
}

        $this
->graph = new graph();
        
$this->graph->pie(60,'#505050','{font-size: 12px; color: #404040;');
        
$this->graph->pie_values( $data, $label );
        
$this->graph->pie_slice_colours( array('#d01f3c','#356aa0','#C79810') );
        
$this->graph->set_tool_tip( '#val#%' );
        
$this->graph->title( 'Pie Chart', '{font-size:18px; color: #d01f3c}' );

        
$this->graph->render();
    
}
}
?>

and the graph_view.php:

<html>
<
body>
    
<?= open_flash_chart_object( 500, 250, site_url('example/chart'), false, base_url() ) ?>
</body>
</
html>

My problem is that when I run http://127.0.0.1/codeigniter/index.php/example I get the loading of flash but no drawings. It seems that the method chart doesn’t send to the view the chart settings.

Thank you in advance for any help.

Profile
 
 
Posted: 29 December 2008 07:32 AM   [ Ignore ]   [ # 14 ]  
Summer Student
Total Posts:  2
Joined  07-09-2007

A bit later but…
Why creating a new object?

$this->graph = new graph();

Also, I found it easier to implement the older version (1.9.7), without the helper. Just use

$this->graph->[properties, methods()]

for your charts.

Profile
 
 
Posted: 25 May 2009 10:54 PM   [ Ignore ]   [ # 15 ]  
Grad Student
Avatar
Rank
Total Posts:  66
Joined  11-16-2008

For Open Flash Chart v2, the author separated the php helper files into modules. There’s so many classes. Each type of chart has a set of their own classes. So, there’s no way to implement them along with CI. The current solution is kept on using OFC v1.9.7 (no further development).
I guest, for drawing chart, that is good enough.

Profile
 
 
   
1 of 2
1
 
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 721, on January 06, 2010 09:38 AM
Total Registered Members: 115022 Total Logged-in Users: 72
Total Topics: 122459 Total Anonymous Users: 5
Total Replies: 647354 Total Guests: 491
Total Posts: 769813    
Members ( View Memberlist )