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:

1. 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.
2. Copy FusionCharts.js file from FusionChartsFree/JSClass/ into the htdocs_ci_dev/public/js/ folder.
3. Copy the whole Charts folder from FusionChartsFree/ to htdocs_ci_dev/public/ folder.
4. 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<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.

• Categories

  • Book Review (5)
  • News (12)
  • Pentaho (1)
  • PHP Tutorials (39)
  • Website Building/SEO (11)

• Tags

  Apache Beginners' Guide blogs books cacti cakephp charts codeigniter comment conference crimson editor errors examples filezilla getting started global warming google google analytics google charts Guides hosting PHP How-to introduction jquery Microsoft monitoring mysql nofollow open source osspac PHP PHP 101 php basics phpMyAdmin reviews rrdtool sample codes SEO source code tools tutorial variables webmasters website XAMPP Lite

• Recent Comments

  • Juan on Codeigniter: Mixing segment-based URL with querystrings
  • tef on Google Analytics API class for PHP
  • Josh Ewin on Wordpress noindex nofollow meta tags problem
  • Justin on Codeigniter: Creating dynamic graphs using JQuery and FusionCharts
  • Avi on Checking a string is alphanumeric in PHP

• Archives

  • 2010  2009  2008  2007

• Recent Posts

  • Codeigniter: Creating dynamic graphs using JQuery and FusionCharts
  • PHP and jQuery: Submit a form without refreshing the page
  • Google Analytics officially uses the Asynchronous Tracking tag
  • PHP Basics: Sorting Arrays
  • Google Analytics Master Class is back in Singapore!