Codeigniter: Creating dynamic graphs using JQuery and FusionCharts

I recently upgraded some of my Codeigniter applications that used OpenFlashCharts to using FusionCharts Free, and at the same time incorporated some javascript to allow me to change the graphs dynamically at the client-side. This has greatly improved the usability of my charts and graphs that I pump out. As such, I thought I would share how I did this and hopefully someone will find it useful as well.

Here’s a demo:

Switching to FusionCharts Free…
FusionCharts is a set of Flash-based charts developed by InfoSoft Global, and they have a limited set which are made available open-source and free. FusionCharts Free comes with 22 popular charts like Column, Line, Pie, Area etc which animates and works really well with any development environment.

I decided to switch to FusionCharts because I found it very well documented and it easily integrated into Codeigniter, much more so than OpenFlashCharts (which needed a wrapper class).

Adding FusionCharts Free (FCF) to Codeigniter
In order to get FCF to work with CI, the files needs to be placed at various locations and some minor adjustments to the .htaccess file is required.

To begin with, my CI is structured based on my previous post on multiple CI sites on one install. If you’re structure is slightly different, don’t worry, you should not have any problems adapting what I did.

If you haven’t already done so, go grab a copy of FCF, and unzip it. You’ll notice that it unpacks quite a lot of files in the FusionChartsFree folder but only a few are essential, the rest are all samples and examples.

The image here shows the file structure you need on your CI install. (Remember this is based on my multiple install post). So, move the files from FusionChartsFree folder into the respective ones at your CI install as follows:

Copy FusionCharts_Gen.php file from FusionChartsFree/Code/PHPClass/Includes/ into the app_ci_dev/libraries/ folder.
Rename to FusionCharts.php. This is so that CI will recognize the class as a library.
Copy FusionCharts.js file from FusionChartsFree/JSClass/ into the htdocs_ci_dev/public/js/ folder.
Copy the whole Charts folder from FusionChartsFree/ to htdocs_ci_dev/public/ folder.
Open the .htaccess file in htdocs_ci_dev/ and add ‘public’ to the 2nd line, so that CI knows not to treat ‘public’ as a controller.

Your .htaccess file should look something like:

1
2
3

RewriteEngine on
RewriteCond $1 !^(index\.php|public|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

Once you have all the files in place, you can start creating your controller and view.

Controller: charts.php

<?php
class Charts extends Controller {
 
	public function __construct() {
		parent::__construct();
		$this->load->library('FusionCharts');
	}
 
	public function index() {
		$this->load->view('charts_index');
	}
 
	public function getData($year='2010') {
 
		// Instantiate the FusionCharts object 
		$FC = new FusionCharts(); 
 
		// specify the graph parameters
		$strParam="caption=Quarterly Sales for ".$year.";xAxisName=Quarter;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0;formatNumberScale=1";
		$FC->setChartParams($strParam);
 
		// specify the data bsaed on the $year parameter
		if ($year=='2010') {
			$FC->addChartData("40800","name=Q1");
			$FC->addChartData("31400","name=Q2");
			$FC->addChartData("26700","name=Q3");
			$FC->addChartData("54400","name=Q4");
		} else {	
			$FC->addChartData("800","name=Q1");
			$FC->addChartData("400","name=Q2");
			$FC->addChartData("700","name=Q3");
			$FC->addChartData("200","name=Q4");
		}
		// output the FusionCharts XML
		print $FC->getXML();
	}
}
?>

For charts.php controller, here’s what’s going on…

At Line 6, we load the FusionChart library
At Line 9, the index() function just load the charts_index view.
At Line 13, this is where we make use of the FCF php API to generate the XML needed for the chart. The function takes in a parameter and based on that returns different datasets.

View: charts_index.php

<html>
<head>
<title>Dynamic Graphs with JQuery and FusionCharts</title>
<script language="JavaScript" src="/public/js/FusionCharts.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="JavaScript">
function drawChart(chartSWF, strXML, chartdiv) {
	//Create another instance of the chart.
	var chart = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0"); 
	chart.setDataXML(strXML);
	chart.render(chartdiv);
}
function updateChart() {
	//call the CI data url
	$.get('/charts/getData/'+$('#changeData').val(), function(data) {
		if ($('#changeChart').val()==='3d') {
			drawChart("/public/fscharts/FCF_Column3D.swf", data,"chart1div");
		} else {
			drawChart("/public/fscharts/FCF_Column2D.swf", data,"chart1div");
		}
	});
}
$(document).ready(function(){
	//create the chart initially
	$.get('/charts/getData/', function(data) {
		drawChart("/public/fscharts/FCF_Column3D.swf", data, "chart1div");
	});
	//update the chart if the dropdown selection changes
	$('#changeChart').change(function() {
		updateChart();
	});
	$('#changeData').change(function() {
		updateChart();
	});
 
});
</script>
</head>
<body>
<select name="changeData" id="changeData">
	<option value="2010" selected>2010</option>
	<option value="2009">2009</option>
</select>
<select name="changeChart" id="changeChart">
	<option value="3d">3D Version</option>
	<option value="2d">2D Version</option>
</select><br>
<div id="chart1div" align="left">The chart will appear within this DIV. This text will be replaced by the chart.</div>
</body>
</html>

For charts_index.php view, most of the magic happens here with javascript/JQuery. If we look at Line 23 onwards first, this set of code gets executed first.

At Line 25, we’re calling the $.get() JQuery function to call the ‘/charts/getData’ url, returns the XML into the the ‘data’ variable and feed that into the drawChart() function defined at Line 7.
At Line 7, the drawChart() function calls the FusionCharts JS library to create a chart based on the XML data ’strXML’ variable and renders the chart into the div element specified by ‘chartdiv’ variable at Line 47.
If you pull down and select the year options, it will fire .change() event at Line 32 which will call the updateChart() function defined at line 13.
Similarly, if you change the versions select box, it will do the same thing and fire the updateChart() function.
When updateChart() is called; at Line 15, it will call the ‘/charts/getData’ url appended with the value of the year selection box. This will trigger the controller to return the dataset based on the variable.
At Line 16, to change the graph versions, it will check for the value of the versions selection box and fire the desired drawChart() function.

That’s it. With this, I was able to generate lots of variations of graphs and charts tied to the database. For my project, I had a separate controller which was used to handle all the data calls, and a model to standard the look and feel of the graphs.

Feel free to comment and give any suggestions you have.

Share and Enjoy:

Related Posts:

Posted on July 30, 2010 at 6:13 pm by Eldee · Permalink
In: PHP Tutorials · Tagged with: charts, codeigniter, jquery

18 Responses

Subscribe to comments via RSS

Written by Justin on September 2, 2010 at 4:17 am
Permalink

Thanks for this, it is really going to help me in my upcoming project.
Written by Santiago on September 9, 2010 at 12:41 am
Permalink

Thanks for this tutorial, it looks great. Im trying to setup this library in a regular CI install. which is the correct file structure for the simple installation of CI?

thanks!
Written by webmaster on September 9, 2010 at 11:22 am
Permalink

Hi Santiago

For the regular CI install, whatever I have spelled out for app_ci_dev goes into your system/application folder

For the public folder, you can put it into the root folder where you see ’system’, ‘user_guide’ folders.

However, I do recommend the structure that I’ve posted on multiple sites on one CI install. http://www.askaboutphp.com/88/codeigniter-setting-up-multiple-sites-on-one-install.html

Even if you have only one site, that structure is still better for the simple reason that the system folder and the application folder is separated. This makes it easier to upgrade your CI later on, and you can ‘hide’ the system folder away from your webroot.
Written by Santiago on September 9, 2010 at 10:55 pm
Permalink

Thanks a lot!
I’ll try.
Written by dr.emi on September 21, 2010 at 11:12 am
Permalink

I hope this tutorial will help me on developing project. Thank you bro!
Written by Hendra on October 5, 2010 at 8:38 pm
Permalink

thx dude
Written by Juan Carlos Velandia on October 14, 2010 at 4:05 am
Permalink

Hello Mate, I’ve follow the tutorial exactly as it is. But the only output that I get is this

The chart will appear within this DIV. This text will be replaced by the chart. as you can see it in:

http://190.146.3.147/CodeIgniter_1.7.2/index.php/charts
Written by Juan Carlos Velandia on October 14, 2010 at 4:06 am
Permalink

Any Ideas? Thanks in advance!!
Written by webmaster on October 14, 2010 at 10:21 am
Permalink

hi Juan
My example script is looking for the data at this URL path /charts/getData/. your installation of CI is http://190.146.3.147/CodeIgniter_1.7.2/index.php

you should change the url path in my example to /CodeIgniter_1.7.2/index.php/charts/getData/ instead of /charts/getData/

Hope that helps.
Written by Juan Carlos Velandia on October 15, 2010 at 1:00 am
Permalink

Thanks a lot, it helped, the browser found the SWF but now i see a “no data to display” message. I think it’s something with the XML, Could you helpme again. Thanks In advance!
Written by zaky on December 17, 2010 at 3:50 pm
Permalink

can you make an example if the data that we displayed in chart is retrieved from database ? thank u
Written by francesca on January 8, 2011 at 10:31 pm
Permalink

hey

can you do a tutorial on how to use fusionchart to create charts using data from a database instead of entering values into an array. It will help on my project so so much, please! thanks. Do email me if you posted a tutorial or have any info that helps. thanks again!

smiles_cool0226@yahoo.com.sg

Franecesca
Written by Romy Carandang on April 30, 2011 at 10:12 am
Permalink

This is awesome!!!! Thank you very much….
You have done a great job for all of us developers….
I bet no negative remarks on your end…
Again thank you.
Written by Codeigniter: Creating dynamic graphs using JQuery and FusionCharts | CodeIgniter Tutorials on May 17, 2011 at 8:00 pm
Permalink

[...] Series andrewroland zend lucene librarycodeigniter 2.0 workshoplearncodeigniter basics Sponsors Top Rated TutorialsUsing Elliot Haughin's Twitter API with Codeigniter Part 2 (2 votes)CodeIgniter Active Record class and INSERT IGNORE (2 votes)Codeigniter Project Development from scratch to app Part 6 (2 votes)Tags2.0 active record ajax amplio.ch andrewroland.com api askaboutphp beginner cart class codesamplez controller country darrenonthe.net db dragffy.com drop down error flashdata form from scratch helper html install jquery login lucene MVC net.tutsplus openflashcharts profiler reactor registration search session simplycodeigniter string twitter upload URL validation view views workshop zend Sponsors LinksCodeigniter: Creating dynamic graphs using JQuery and FusionCharts [...]
Written by Gieart on October 16, 2011 at 6:58 pm
Permalink

Hi…
I’m very interested in Fushion Chart.. But i have red from it’s forums that fushion charts doesn’t support CI at this time.. http://forum.fusioncharts.com/topic/9521-fusionchart-with-code-igniter/

It’s very sad.. Could you give me any way to integrate that??
Help me..

thanks.
Written by Kutty on December 27, 2011 at 6:07 pm
Permalink

Nice work…….
Thanks
Written by kalai on November 1, 2012 at 8:15 pm
Permalink

i cant understand this part, first of all what can i do for that task. pls help me
Written by kalai on November 1, 2012 at 8:17 pm
Permalink

where i can write the view part, if i load the library file, it show me error like requested class fiile not loaded,

Ask About PHP

Home

Tutorials

Subscribe

Codeigniter: Creating dynamic graphs using JQuery and FusionCharts

18 Responses

Subscribe to comments via RSS

Subscribe to comments via RSS

Leave a Reply

Categories

Recent Comments

Archives

Recent Posts

Ask About PHP

Home Tutorials Subscribe

Codeigniter: Creating dynamic graphs using JQuery and FusionCharts

18 Responses

Subscribe to comments via RSS

Subscribe to comments via RSS

Leave a Reply

Categories

Tags

Recent Comments

Archives

Recent Posts

Home

Tutorials

Subscribe