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.
