« jQuery Fancybox 1.3.1 plugin images not working on IE : How to fix it

Highcharts Library for CodeIgniter

Hi everyone, in this post I’ll talk about a Codeigniter library that I’ve done after few hours using highchart. Highchart is one of the best javascript library i’ve ever used to render beautiful charts (which are compatible with iPhone and iPad). This library is awesome !

Here is a first draw of the library I’ve done, it’s not perfect but it’s working well for the simple graphs I had to do. Let’s see this HighChart library.

Basically HighChart is using a json array, to render the graph. All the configuration and the data are located into this array of options. What I’ve done in this library it’s just fill this array of option before to build the javascript code to render the graph. Let’s have a look to the code.

class Highcharts_lib{

	private $a_options;
	private $s_rendering;
	private $i_serie_index;

Here is the basic class named “Highcharts_lib”. As you can see there is 3 private variables. The first one “$a_options” is as we said before all the configuration of the graphs plus de data of the series. “$s_rendering” will store the javascript code to insert into your view to render the graph. And finally “$i_serie_index” is an index which allow us to store severals series into the option array. Let’s continue…

	function __construct(){
		$this->a_options=array();

		# Set Default Values
		$this->set_container_id('highchart_id');
		$this->set_graph_type('spline');
		$this->display_credit(FALSE);

		$this->i_serie_index = 0;
		$this->a_options['series'] = array();
	}

Into the constructor I’m just initialising some variables and some default configuration for the graphs.
For exemple, set_container_id() is a method to set the ID of the container (div) of the graph:

function set_container_id($s_id=''){
		if(trim($s_id)!= ''){
			$this->a_options['chart']['renderTo'] = $s_id;
		}
		return $this;
	}

As you can see we just set a value into the array of options and return the object. This is very important, “return $this” will allow us to do what we call “Methods chaining” which is very useful when you have to set some few options. I won’t explain the others methods as they are very similar to the one I’ve explained. We will now focus on the series.

To manage the series of the graphs I’m using 4 methods, here they are:

	/* Series Options */
	function add_serie($s_serie_name='', $a_value=array(), $s_type=''){
		$s_serie_name = trim($s_serie_name);
		if($s_serie_name != '' && is_array($a_value)){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f!==FALSE ){
				foreach($a_value as $value){
					$value = (is_numeric($value)) ? (float)$value : $value;
					$this->a_options['series'][$f]['data'][] = $value;
				}
			}else{
				$this->a_options['series'][$this->i_serie_index]['name'] = $s_serie_name;
				foreach($a_value as $value){
					$value = (is_numeric($value)) ? (float)$value : $value;
					$this->a_options['series'][$this->i_serie_index]['data'][] = $value;
				}

				$this->set_serie_option($s_serie_name, 'type', $s_type);
				$this->i_serie_index++;
			}
		}
		return $this;
	}

	function set_serie($s_serie_name='', $a_value=array()){
		$s_serie_name = trim($s_serie_name);

		if($s_serie_name != '' && is_array($a_value)){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f !== FALSE ){
				# Reset the serie
				$this->a_options['series']['data'][$f] = array();
				foreach($a_value as $value){
					$value = (is_numeric($value)) ? (float)$value : $value;
					$this->a_options['series'][$f]['data'][] = $value;
				}
			}else{
				$this->add_serie($s_serie_name, $a_value);
			}
		}
		return $this;
	}

	function push_serie_data($s_serie_name = '', $s_value=''){
		if($s_serie_name != '' && $s_value !='' ){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f !== FALSE ){
				$s_value = (is_numeric($s_value)) ? (float)$s_value : $s_value;
				$this->a_options['series'][$f]['data'][] = $s_value;
			}else{
				$this->add_serie($s_serie_name, array($s_value));
			}
		}
		return $this;
	}

	function set_serie_options($s_serie_name='', $s_option_name='', $option_value=''){
		if($s_serie_name != '' && $s_option_name !='' &&  $option_value!=''){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f !== FALSE ){
				$this->a_options['series'][$f][$s_option_name] = $option_value;
			}
		}
		return $this;
	}

This 4 methods need some more work but the result is here and it’s working. add_serie() as its name stand for is to add a serie. The first parameter is the name of the serie, this parameter is the most important. The name of the serie will we used into the legend by default, also we’ll use this name each time we need to push data into the serie. As you can see the second parameter allow us to set the data of the serie directly in here, but it’s not compulsory. And finally the last parameter is the type of the graph that we want to render for this serie.

The second method is to set the data of the series if you did not do it on the first time at the create of the serie. I have to tell that I’m not using this method but still it should work

The third method is to push data into the serie that you’ve created before. This method is the one I used the most and we’ll have a look into the exemple later on.

And finally the last option is to set options of the specific serie.

Let’s have a look to an exemple now

function view_graph(){
$this->library->load('Highcharts_lib');

# Set the graph using methods chaining
$this->Highcharts_lib
->set_graph_type('spline')
->toggle_legend(TRUE)
->display_shadow(TRUE)
->set_xlabels_otpions('rotation', -45)
->set_graph_title('')
->set_yAxis(array(), 'Clicks')
->add_serie('The first Serie', array())
->add_serie('This is the second Serie', array(),'areaspline');

# Set random data for the series
for($i=1 ; $i <=365 ; $i++){
	$value = rand(100, 500);
	$value_second_serie = rand(50, 70);

	$this->Highcharts_lib->push_serie_data('The first Serie', $value);
	$this->Highcharts_lib->push_serie_data('This is the second Serie', $value_second_serie);

	// At the same time we set the axis label
	$this->Highcharts_lib->push_xAxis_value($i);
}

# We can use debug to check the content of the options array
//$this->highcharts_lib->debug();
$s_graph = $this->Highcharts_lib->render(800,400);

$this-assign('graph_source', $s_graph);
$this->view('graphs.tpl');
}

As you can see methods chaining is very useful in here. I forgot to mention that you need to include the jQuery library into your template as HighChart is using this library to render the graphs. You can find bellow the whole library source, do not hesitate if you like to make some comments on it and thanks to read me

Here is the rendered graph:

And here the ull source of the library:

class Highcharts_lib{

	private $a_options;
	private $s_rendering;
	private $i_serie_index;

	function __construct(){
		$this->a_options=array();

		# Set Default Values
		$this->set_container_id('highchart_id');
		$this->set_graph_type('spline');
		$this->display_credit(FALSE);

		$this->i_serie_index = 0;
		$this->a_options['series'] = array();
	}

	function set_chart_otpions($option_name, $option_value){
		$option_name = trim($option_name);
		if($option_name != ''){
			if(is_array($option_value) && !empty($option_value)){
				$this->a_options['chart'][$option_name] = json_encode($option_value);
			}else{
				$this->a_options['chart'][$option_name] = trim($option_value);
			}
		}
		return $this;
	}

	function set_xlabels_otpions($option_name, $option_value){
		$option_name = trim($option_name);
		if($option_name != ''){
			if(is_array($option_value) && !empty($option_value)){
				$this->a_options['xAxis']['labels'][$option_name] = json_encode($option_value);
			}else{
				$this->a_options['xAxis']['labels'][$option_name] = trim($option_value);
			}
		}
		return $this;
	}

	function set_ylabels_otpions($option_name, $option_value){
		$option_name = trim($option_name);
		if($option_name != ''){
			if(is_array($option_value) && !empty($option_value)){
				$this->a_options['yAxis']['labels'][$option_name] = json_encode($option_value);
			}else{
				$this->a_options['yAxis']['labels'][$option_name] = trim($option_value);
			}
		}
		return $this;
	}

	/* Graph Options */
	/**
	 * Set the title option
	 *
	 * @param String $s_title
	 * @param String $align
	 * @param Integer $x
	 * @param Integer $y
	 * @param CSSObject $a_css
	 * @return unknown
	 */
	function set_graph_title($s_title='', $align='center', $x=0, $y=20, $a_css=array()){
		$this->a_options['title']['text'] = ($s_title=='') ? NULL : $s_title;
		$this->a_options['title']['align'] = $align;
		$this->a_options['title']['x'] = $x;
		$this->a_options['title']['y'] = $y;
		if(!empty($a_css)){
			$this->a_options['title']['style'] = json_encode($a_css);
		}
		return $this;
	}

	function set_graph_margin($top=50, $right=50, $bottom=70, $left=80){

		echo json_encode(array($top, $right, $bottom, $left));
		$this->a_options['chart']['margin'] = json_encode(array($top, $right, $bottom, $left));
		return $this;
	}

	function set_backgroundcolor($color='#000000'){
		if(trim($color)!= ''){
			$this->a_options['chart']['backgroundColor'] = $color;
		}
		return $this;
	}

	function display_shadow($bool=FALSE){
		if(is_bool($bool)!= ''){
			$this->a_options['chart']['shadow'] = $bool;
		}
		return $this;
	}

	function set_container_id($s_id=''){
		if(trim($s_id)!= ''){
			$this->a_options['chart']['renderTo'] = $s_id;
		}
		return $this;
	}

	function set_graph_type($s_type=''){
		if(trim($s_type)!= ''){
			$this->a_options['chart']['defaultSeriesType'] = $s_type;
		}
		return $this;
	}

	function toggle_legend($enabled=TRUE){
		if(is_bool($enabled)){
			$this->a_options['legend']['enabled'] = $enabled;
		}
		return $this;
	}

	function display_credit($enabled=TRUE){
		if(is_bool($enabled)){
			$this->a_options['credits']['enabled'] = $enabled;
		}
		return $this;
	}

	/* Axis Options */
	function set_xAxis($a_value=array(), $title=FALSE){
		if(is_array($a_value) && !empty($a_value)){
			$this->a_options['xAxis']['categories'] = $a_value;
		}
		if($title !== FALSE && trim($title) != ''){
			$this->a_options['xAxis']['title']['text'] = $title;
		}
		return $this;
	}

	function push_xAxis_value($value){
		if(trim($value)!= ''){
			$this->a_options['xAxis']['categories'][] = $value;
		}
		return $this;
	}

	function set_yAxis($a_value=array(), $title=FALSE){
		if(is_array($a_value) && !empty($a_value)){
			$this->a_options['yAxis']['categories'] = $a_value;
		}
		if($title !== FALSE && trim($title) != ''){
			$this->a_options['yAxis']['title']['text'] = $title;
		}
		return $this;
	}

	function push_yAxis_value($value){
		if(trim($value)!= ''){
			$this->a_options['yAxis']['categories'][] = $value;
		}
		return $this;
	}

	/* Series Options */
	function add_serie($s_serie_name='', $a_value=array(),$type=''){
		$s_serie_name = trim($s_serie_name);
		if($s_serie_name != '' && is_array($a_value)){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f!==FALSE ){

				if($type!=='')$this->a_options['series'][$f]['type'] = $type;
				foreach($a_value as $value){
					$value = (is_numeric($value)) ? (float)$value : $value;
					$this->a_options['series'][$f]['data'][] = $value;
				}
			}else{
				if($type!=='')$this->a_options['series'][$this->i_serie_index]['type'] = $type;
				$this->a_options['series'][$this->i_serie_index]['name'] = $s_serie_name;
				foreach($a_value as $value){
					$value = (is_numeric($value)) ? (float)$value : $value;
					$this->a_options['series'][$this->i_serie_index]['data'][] = $value;
				}

				$this->i_serie_index++;
			}
		}
		return $this;
	}

	function set_serie($s_serie_name='', $a_value=array()){
		$s_serie_name = trim($s_serie_name);

		if($s_serie_name != '' && is_array($a_value)){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f !== FALSE ){
				# Reset the serie
				$this->a_options['series']['data'][$f] = array();
				foreach($a_value as $value){
					$value = (is_numeric($value)) ? (float)$value : $value;
					$this->a_options['series'][$f]['data'][] = $value;
				}
			}else{
				$this->add_serie($s_serie_name, $a_value);
			}
		}
		return $this;
	}

	function set_serie_option($s_serie_name='', $s_option='', $value=''){
		# First we search the serie
		$s_serie_name = trim($s_serie_name);
		if($s_serie_name !== '' && $s_option!==''){
			$f=false;
			# We check that we have a serie with the name
			foreach($this->a_options['series'] as $index => $serie){
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			# If Yes
			if( $f !== FALSE ){
				$this->a_options['series'][$f][$s_option] = $value;
			}
		}
		return $this;

	}

	function push_serie_data($s_serie_name = '', $s_value=''){
		if($s_serie_name !== '' && $s_value !=='' ){
			$f=false;
			foreach($this->a_options['series'] as $index => $serie){
				//echo strtolower($serie['name'])." == ".strtolower($s_serie_name)."";
				if(strtolower($serie['name']) == strtolower($s_serie_name)){
					$f=$index;
					break;
				}
			}

			if( $f !== FALSE ){
				$s_value = (is_numeric($s_value)) ? (float)$s_value : $s_value;
				$this->a_options['series'][$f]['data'][] = $s_value;
			}else{
				$this->add_serie($s_serie_name, array($s_value));
			}
		}
		return $this;
	}

	/* Render */
	function render($width=FALSE,$height=FALSE,$div_id=FALSE){
		$width = ($width !== FALSE && is_numeric($width)) ? $width.'px' : '100%';
		$height = ($height !== FALSE && is_numeric($height)) ? $height.'px' : '400px';
		$div_id = ($div_id !== FALSE && trim($div_id) != '') ? $div_id : $this->a_options['chart']['renderTo'];
		$this->set_container_id($div_id);

		$this->s_rendering = '<script src="/js/highcharts.js" type="text/javascript"></script>';
		$this->s_rendering .= '<script>';
		$this->s_rendering .= '$(document).ready(function(){';
		$this->s_rendering .= 'var options = '.json_encode($this->a_options).';';
		$this->s_rendering .= 'var chart = new Highcharts.Chart(options);';
		$this->s_rendering .= '});';
		$this->s_rendering .= '</script>';
		$this->s_rendering .= '


';
		return $this->s_rendering;
	}

	function debug(){
		echo '<pre>';
		print_r($this->a_options);
		echo '</pre>';
	}
}

This entry was posted by Maxime on August 22, 2010 at 6:16 pm, and is filed under PHP / jQuery. Follow any responses to this post through RSS 2.0.You can leave a response or trackback from your own site.

Comments (28)
Pings (3)
Related Posts

#1 written by Dave 1 year ago

The last method (debug) and class close have broken in the full source when you have inserted it into WP

Quote
#2 written by Maxime 1 year ago

Thanks Dave, it’s fixed now.

Quote
#3 written by Pharmacy technician program 1 year ago

Wow this is a great resource.. I’m enjoying it.. good article

Quote
#4 written by ultrasound technician 1 year ago

Great information! I’ve been looking for something like this for a while now. Thanks!

Quote
#5 written by vaibhav 1 year ago

Hi,
can u please give complete working example for download.
Vaibhav Maluste

Quote
#6 written by Maxime 1 year ago

vaibhav:

Hi,
can u please give complete working example for download.
Vaibhav Maluste

Well this is quiet complete. You have the full source code of the library and the example to render the graph using the library. if you follow all the instructions you’ll be able to render the graph you want.

Quote
#7 written by Snowdarth 1 year ago

Hi, it looks pretty nice but I can’t understand why you render the graph in a tpl view (line 32), are you using smarty template (or similar)?

Quote
#8 written by Maxime 1 year ago

Yes I’m using Smarty. It’s a personal choice, not sure it’s the best idea but I use to work with smarty before and I found it very simple and very useful. You don’t have to use smarty to use this library, you can use whatever template engine you want.

Quote
#9 written by Mike 1 year ago

Just wanted to say thanks for this. It’s been really really helpful on a time tracking app I’m working on.

Quote
#10 written by Mike 1 year ago

How do I reset a graph? For example, if I create a graph and render it, and then create a completely different graph and render it, it’s like it’s adding the new graph to the existing one. How can I reset the existing one?

Here’s my code: http://pastie.org/1204051

Quote
#11 written by Maxime 1 year ago

Hi Mike, you have 2 choices.
The first one is too create 2 different objects for the 2 different graphs.
The other solution is to create a method to reset the data variable and set the defaults parameters.

Quote
#12 written by Jeremie 1 year ago

Great post
I found those posts useful too:
http://eremiya.net/2010/11/02/jquery-highcharts-and-coldfusion-tutorial-part-1/

and this one for flot:
http://eremiya.net/2009/07/08/jquery-flot-tutorial-part-1/

Hope this help.

Quote
#13 written by wicak 1 year ago

why do i kept getting

Fatal error: Call to undefined method Dashboard::assign() in C:\AppServ\www\asr\system\application\controllers\backend\dashboard.php on line 43

thx

Quote
#14 written by Santiago131 1 year ago

Excellent your code, and adapt it served me without problems, would be excellent if you did a manual or a wiki about the library, thanks for the code I hope you continue working on it ;D

Quote
#15 written by Administrator 1 year ago

Assign() is a method that i’m callin to send the data to the view (i’m using smarty).
Just comment this line and use whatever you want to populate your HTML source code.

Quote
#16 written by Administrator 1 year ago

Thanks for your comment. Unfortunately i don’t have a lot of time to maintain this code but feel free to do it if you want. This code is open source, everyone can use it and modify it as much as they want

Quote
#17 written by netfreak 1 year ago

Great Library m8, saved me a lot of time. Surely deserves a place on Codeigniter Wiki. There are some glitches here and there ( i.e. your usage of “otpions”, lol can confuse someone ) and a small *bug* but overall, awesome stuff!

The *bug*: You forgot to add $width and $height values to the produced div style.

So the line #278 should be:
[code]a_options['chart']['renderTo'].'" style="width:'.$width.';height:'.$height.';">[/code]

( I hope your comments accept bb code or something )

Thanks again

Quote
#18 written by Ricardo Bermúdez 1 year ago

thnx very much

Quote
#19 written by ronan 1 year ago

hi, i’ve tested your lib, and found that some parameters from highcharts API was not available.
So i’ve decided to write my own (https://github.com/ronan-gloo/codeigniter-highcharts-library) to have more flexibility.
Thanks for inspiration

Quote
#20 written by Christian 1 year ago

HI
I am using HighCharts right now on an EE2 project. Having an HighCharts library running within EE2 would be great. Anybody with an idea how to get started?

Quote
#21 written by Chris D - in AU 11 months ago

Very nice, thank you. Adjusted it a bit to work in my CI.
1. $this->library->load ?
I had to change to $this->load->library
2. tpl file… the demo should just echo out to screen
3. demo should echo html head and head script loaders.

After doing those 3 things, I managed to run the demo script in a test controller perfectly!
Thank you.

Quote
#22 written by vaibhav 10 months ago

ronan:

hi, i’ve tested your lib, and found that some parameters from highcharts API was not available.
So i’ve decided to write my own (https://github.com/ronan-gloo/codeigniter-highcharts-library) to have more flexibility.
Thanks for inspiration

10000000000000000000 thanks for your library

Quote
#23 written by yen 9 months ago

Hi, have you tried to change the legend icon before using the renderer. I would like to have a some examples for this. thanks.

Quote
#24 written by Amit Shah 9 months ago

Hi dudes,

Thanks for the wonderful library work done by you. But surely there is a lot of stuff needed to go in the same, Can i get access to the github on the project as i had downloaded and have had made quite a few changes myself for my own purpose. Will be great to have an update from you.

Quote
#25 written by Maxime 9 months ago

Amit Shah:

Hi dudes,

Thanks for the wonderful library work done by you. But surely there is a lot of stuff needed to go in the same, Can i get access to the github on the project as i had downloaded and have had made quite a few changes myself for my own purpose. Will be great to have an update from you.

Hey mate, feel free to update the library. It has been a couple of months (year maybe) since I’ve done it. I pretty sure there heaps of stuffs to update and modify. I know that Ronan start a GitHub repository for this lib: https://github.com/ronan-gloo/codeigniter-highcharts-library you might want to fork it or work with him to keep it up to date

@everyone you are more than welcome.

Quote
Type your comment
You may use these HTML tags: <a> <abbr> <acronym> <b> <blockquote> <cite> <code> <del> <em> <i> <q> <strike> <strong>
Comment Feed for this Post

Highcharts Library for CodeIgniter

Categories

Archives

Tweets

Pages

Highcharts Library for CodeIgniter

Categories

Tags

Archives

Tweets

Pages