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…

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.

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:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Propeller
  • Reddit
  • StumbleUpon
  • Technorati
  • Yahoo! Buzz
Posted on July 30, 2010 at 6:13 pm by Eldee · Permalink
In: PHP Tutorials · Tagged with: , ,

18 Responses

Subscribe to comments via RSS

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

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

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

  4. Written by Santiago on September 9, 2010 at 10:55 pm
    Permalink

    Thanks a lot!
    I’ll try.

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

  6. Written by Hendra on October 5, 2010 at 8:38 pm
    Permalink

    thx dude

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

  8. Written by Juan Carlos Velandia on October 14, 2010 at 4:06 am
    Permalink

    Any Ideas? Thanks in advance!!

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

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

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

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

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

  14. [...] 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 [...]

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

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

    Nice work…….
    Thanks

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

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

Subscribe to comments via RSS

Leave a Reply