Code Igniter & maani.us

Many of us feels that a report without a graph is totally incomplete. I also agree with it completely. We need to represent the data in reports to be meaningful and also representable. A table with rows of data does not give the reader a clear idea about what is actually happening. So it is better to show a chart or a graph to the user before showing the long tables of data.

In PHP, one of the most popular graph tool is php/swf charts from maani.us. This tool provides some cool looking graphs with easy to integrate with your application. The integration becomes much easier if you are using Oode Igniter. In this article I am going to describe you, how to integrate maani.us php/swf charts with your Code Igniter application.

Detail Steps to Install the application:

1. download php/swf charts from http://www.maani.us

2. Create a directory named charts or any appropriate name in your root folder (not inside the Code Igniter system folder). it is better if you keep the CI system folder and charts folder on same level.

3. put the unzipped content (except the charts.php) file of the downloaded file in this folder.

Writing Code Igniter code:

You can integrate the maani.us code by either creating a library in Code Igniter or by simply creating a helper. I am going to show you the process by creating a helper file. In order to create a helper file in Code Igniter, you can either create a helper file in systemhelpers or systemapplicationhelpers file. In the later case you have to create the directory as Code Igniter does not create it by default. It is always better to keep the core files and folders of Code Igniter to be intact. Code Igniter gives you the flexibility to extend any of its helpers, libraries, plugins etc to be extended from the application folder.

here are the detail steps for creating and showing graph in a view:

1. first create a helper named graph_helper.php and copy paste the content of charts.php in this file. save the file.

2. now load the helper file from your controller where you want to show the graph. there are two parts in the helper file. One for inserting the chart and in order to show a chart, we need to define the data and chart properties. the SendChartData function defines the properties of the chart and InsertChart shows the Data. in InsertChart function we have to define few things

  • location of the flash file (.swf) , in our case in the charts folder in base directory.
  • location of the charts library, in our case in the charts folder in base directory.
  • PHP source location for ChartData or SendChartData function, in our case a controller.
  • width, height, background color, transparency and license information

here is the code inside a controller looks like.

$this->load->helper(“graph”);
$url = site_url().”/reports/showsummary/”;
$charturl = base_url().”/charts/charts.swf”;
$chartlib = base_url().”/charts/charts_library”;

$data[‘chart’] = InsertChart( $charturl, $chartlib, $url ,650,300,”cccccc” ); // passing the chart information to view.

$this->load->view(“reports/dashboard”, $data);
now we have to define the controller which will send the data for the graph.

function showsummary()

{

$this->load->helper(“graph”);
$chart[ ‘axis_category’ ] = array ( ‘font’=>”arial”, ‘bold’=>true, ‘size’=>16, ‘color’=>”000000″, ‘alpha’=>60, ‘skip’=>0 ,’orientation’=>”vertical” );
$chart[ ‘axis_ticks’ ] = array ( ‘value_ticks’=>false, ‘category_ticks’=>false, ‘major_thickness’=>2, ‘minor_thickness’=>1, ‘minor_count’=>1, ‘major_color’=>”222222″, ‘minor_color’=>”222222″ ,’position’=>”centered” );
$chart[ ‘axis_value’ ] = array ( ‘font’=>”arial”, ‘bold’=>true, ‘size’=>10, ‘color’=>”000000″, ‘alpha’=>50, ‘steps’=>6, ‘prefix’=>””, ‘suffix’=>””, ‘decimals’=>0, ‘separator’=>””, ‘show_min’=>true );

$chart[ ‘chart_border’ ] = array ( ‘color’=>”000000″, ‘top_thickness’=>0, ‘bottom_thickness’=>0, ‘left_thickness’=>5, ‘right_thickness’=>0 );

$chart[ ‘chart_grid_h’ ] = array ( ‘alpha’=>10, ‘color’=>”000000″, ‘thickness’=>0 );
$chart[ ‘chart_grid_v’ ] = array ( ‘alpha’=>10, ‘color’=>”000000″, ‘thickness’=>20 );
$chart[ ‘chart_rect’ ] = array ( ‘x’=>50, ‘y’=>50, ‘width’=>540, ‘height’=>200, ‘positive_color’=>”ffffff”, ‘positive_alpha’=>30, ‘negative_color’=>”ff0000″, ‘negative_alpha’=>10 );
$chart[ ‘chart_type’ ] = “line”;

$chart[ ‘chart_data’ ] = array ( array ( “”, “2004”, “2005”, “2006”, “2007” ), array ( “region 1”, 48, 55, 80, 100 ), array ( “region 2”, -12, 10, 55, 65 ), array ( “region 3″, 27, -20, 15, 80) );

$chart[ ‘chart_value’ ] = array ( ‘prefix’=>””, ‘suffix’=>””, ‘decimals’=>0, ‘separator’=>””, ‘position’=>”cursor”, ‘hide_zero’=>true, ‘as_percentage’=>false, ‘font’=>”arial”, ‘bold’=>true, ‘size’=>12, ‘color’=>”000000″, ‘alpha’=>100 );
$chart[ ‘draw’ ] = array ( array ( ‘type’=>”text”, ‘color’=>”000033″, ‘alpha’=>25, ‘font’=>”arial”, ‘rotation’=>0, ‘bold’=>true, ‘size’=>30, ‘x’=>0, ‘y’=>5, ‘width’=>650, ‘height’=>295, ‘text’=>”Statistics”, ‘h_align’=>”right”, ‘v_align’=>”bottom” ) );
$chart[ ‘legend_label’ ] = array ( ‘layout’=>”horizontal”, ‘font’=>”arial”, ‘bold’=>true, ‘size’=>13, ‘color’=>”000000″, ‘alpha’=>50 );
$chart[ ‘legend_rect’ ] = array ( ‘x’=>25, ‘y’=>10, ‘width’=>600, ‘height’=>5, ‘margin’=>3, ‘fill_color’=>”ffffff”, ‘fill_alpha’=>10, ‘line_color’=>”000000″, ‘line_alpha’=>0, ‘line_thickness’=>0 );
$chart[ ‘series_color’ ] = array ( “ddaa41”, “88dd11”, “4e62dd”, “ff8811”, “8A2BE2”, “FF1493”, “F0E68C”, “DDA0DD”,”8B4513″,”FFFF00″,”FF6347″,”708090″,”B0E0E6″,”808000″, “20B2AA”, “FF8C00”, “338833” );
$chart[ ‘series_gap’ ] = array ( ‘bar_gap’ => 0, ‘set_gap’ => 35 );

SendChartData ($chart);
}

You can copy paste this part from maani.us graph examples according to your graph choice. Just copy the first line

$this->load->helper(“graph”);

when you run the changes, you will see that the graphs are generated and it is shown in the view as expected. I have shown how to put a chart in a variable and pass it to view. It is a good way to show more than one graph if required.

I hope that shows how easily you can add a cool featured graph tool in your Code Igniter application. Let me know any comments, questions regarding Code Igniter and PHP.

10 thoughts on “Code Igniter & maani.us

  1. Paddy x Murphy says:

    Mizanur,

    I have been a longtime user of PHP/SWF and have recently adopted Codeigniter so this is very helpful.

    I have had a go at implementing this and I am getting stuck one place and I wonder if you can help me.

    This is what I have done:

    1. Contents of ‘charts.php’ saved to ‘charts_helper.php’ in ‘/system/helpers/’.

    2. Simple view ‘charter.php’ created with, essentially, one line ‘echo $chart’.

    3. ‘charter.php’ controller created with the following content:

    ——————-

    class Charter extends Controller {

    function Charter() {
    parent::Controller();
    $this->load->helper(‘charts’);
    }

    function index() {
    $url = site_url().’/charter/datasource’;
    $charturl = base_url().’/charts/charts.swf’;
    $chartlib = base_url().’/charts/charts_library’;
    $data[‘chart’] = InsertChart($charturl, $chartlib, $url ,400,400,’CCFFCC’);
    $this->load->view(‘charter’, $data);
    }

    function datasource() {
    $this->load->helper(‘charts’);
    $chart[ ‘axis_category’ ] = array ( ‘size’=>16, ‘color’=>”000000″, ‘alpha’=>75, ‘skip’=>0 ,’orientation’=>”horizontal” );
    …..(chart definition)…
    SendChartData ( $chart );
    }

    }

    —————————–

    The good news is that I am getting the chart container which responds to changes in the size and background colour so we are getting the swf.

    Here’s the problem: no chart is displayed. I have tried creating a separate datasource and still no chart. Can you see what’s wrong?

    Thanks

    Paddy

  2. booleandreams says:

    hi paddy

    if you can see the default graphs on your swf, that means you have a problem with the data part for the chart. if the chart_data variable is not set properly then maani shows the default graph for that type. make sure that your chart_data contains a two dimension array or array of arrays. dump the chart_data part and you will understand where the problem is.

    if you still cant find any solution, just dump me the chart_data variable.

    thanks
    Mizan

  3. Paddy x Murphy says:

    Mizanur,

    Thank you for that guidance. I’m going to have another look at the code with your comments in mind.

    Keep up the good work.

    Regards

    Paddy

  4. Ricky says:

    Hello, this is just what I’m looking for, but I’m having the same problem as paddy, was this ever resolved?

    I’m getting the container with the default background colour, but no chart is rendering.

    Any ideas on what could be happening?

  5. booleandreams says:

    hi ricky

    its you are getting the container that means the swf is loaded properly and the chart_data is not formatted properly. check that part of the code. make sure that your chart_data contains a two dimension array or array of arrays. dump the chart_data part and you will understand where the problem is.

    if you still cant find any solution, just send me the code

    thanks
    Mizan

  6. Bojan says:

    Hello,

    I am new to PHP/SWF. I am trying to use it with PHP/MySQL at the moment and am having problems.

    I am trying to display a simple bar graph. but… When I get a value from my database from a query and try to use it as a value in the graph only the default chart appears.

    I have tried isolating the problem and the default chart appears the moment there is a query made to my database.

    When using static variables the chart looks great though.

    Is there a simple way to fix this?

  7. Patrick says:

    I download the file from maani.us,but i didn’t find file chart.php. Can you show the code of chart.php/graph_helper.php??
    Thx ^^

  8. praveen says:

    Hi,
    Thanks for the article,
    I am not able to find the charts.php file in the downloaded folder. Where can I get this file?

Leave a Reply to Ricky Cancel reply

Your email address will not be published. Required fields are marked *