Aug
22

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 :P

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>'; } }

28 Comments to “Highcharts Library for CodeIgniter”

  • Dave August 23, 2010 at 8:13 am

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

  • Maxime August 23, 2010 at 8:59 am

    Thanks Dave, it’s fixed now.

  • links for 2010-08-23 | //Blog August 24, 2010 at 3:06 am

    [...] Highcharts Library for CodeIgniter | Crustiz.com (tags: codeigniter) [...]

  • Pharmacy technician program August 24, 2010 at 5:24 am

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

  • ultrasound technician August 24, 2010 at 9:00 am

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

  • vaibhav September 5, 2010 at 2:25 am

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

  • Maxime September 5, 2010 at 9:02 pm


    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.

  • Snowdarth September 24, 2010 at 12:45 am

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

  • Maxime October 4, 2010 at 11:31 am

    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.

  • Youtube library for CodeIgniter | Crustiz.com October 4, 2010 at 2:08 pm

    [...] Web 2.0 « Highcharts Library for CodeIgniter [...]

  • Mike October 7, 2010 at 12:45 am

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

  • Mike October 7, 2010 at 7:41 am

    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

  • Pass a PHP string (which represents a JS function) through json_encode() | DeveloperQuestion.com October 14, 2010 at 2:25 am

    [...] Tags: JSON, php, php array, stack overflow I'm using this PHP/CodeIgniter library for jQuery Highcharts: http://www.crustiz.com/php-jquery/highcharts-library-for-codeigniter/ [...]

  • Maxime October 16, 2010 at 11:49 pm

    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.

  • Jeremie November 8, 2010 at 11:43 am
  • wicak November 9, 2010 at 1:35 pm

    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

  • Santiago131 November 17, 2010 at 5:38 am

    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

  • Administrator November 19, 2010 at 12:16 pm

    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.

  • Administrator November 19, 2010 at 12:20 pm

    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 ;)

  • netfreak December 9, 2010 at 6:45 am

    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 :)

  • Ricardo Bermúdez December 11, 2010 at 6:46 am

    thnx very much

  • ronan December 16, 2010 at 12:11 am

    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 :)

  • Christian January 4, 2011 at 6:01 pm

    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?

  • Chris D - in AU March 2, 2011 at 11:05 am

    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.

  • vaibhav March 31, 2011 at 5:58 pm


    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

  • yen April 5, 2011 at 5:33 pm

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

  • Amit Shah April 25, 2011 at 8:44 pm

    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.

  • Maxime April 25, 2011 at 9:29 pm


    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.

Post comment