Teddy A Jasin

my little nest on the net

Flotr line graph php class

I just created a simple php class to generate javascripts for use in Flotr graph. Currently I only made till the line graph. Not yet to the other type of graph.

I used this class to create a xaraya block that displays the graph by passing configuration into the class.

Hope this class would be useful to anyone... will improve further once I not too busy...

The class:

 
  class xarFlotr
{
	var $container;
	var $_fn_xaxis_formatter;
	var $_fn_point_vars;
	var $_fn_xaxis;
	var $_fn_yaxis;
	var $points;
	var $maxX = 0;
	var $minX = 0;
	var $maxY = 0;
	var $minY = 0;
	var $_mousetracker;
 
	function xarFlotr($config){
		if (empty($config)) return;
 
		/*set container for the graph*/
		$this->container = $config['container'];
 
		/*set x axis */
		$this->_setXaxis($config['xaxisconfig']);
		$this->_setXaxisFormatter($config['xaxisconfig']); //=> set display of x instead of number use formatter
 
		/*set Y axis */
		$this->_setYaxis($config['yaxisconfig']);
 
		/*set graph points */
		$this->_setXYpoints($config['points']);
 
		/*declare graph points variables*/
		$this->_setXYvars();
 
		//enable mousetracker
		if(isset($config['mousetracker']) && !empty($config['mousetracker']))$this->_Mousetracker($config['mousetracker']);
 
		return true;
	}
 
	function _setXaxisFormatter($args){
		extract($args);
		if (empty($format)) return '';
		$_formatVals = array();
		//ensure format is string
		foreach ($format as $val) $_formatVals[] ="'$val'";
		$_formatVals = join(",",$_formatVals);
		$js = <<<EOD
					var XaxisFormat = ['',{$_formatVals}];
					function getXlabel(index){
						return XaxisFormat[index];
					}
EOD;
		$this->_fn_xaxis_formatter = $js;
		return $js;
	}
 
	function _setXaxis($args){
		extract($args);
		$max = $length + 0.5;
		$js = <<<EOD
 
							xaxis:{
								//noTicks: {$length},	// Display number of  ticks.
								//min: 1,		// => part of the series is not displayed.
								//max: {$max}	// => part of the series is not displayed.
								tickDecimals: 0,
								tickFormatter: function(n){ return getXlabel(n); }
							}
EOD;
		$this->_fn_xaxis = $js;
		return $js;
	}
 
	function _setYaxis($args){
		extract($args);
		$max = $this->maxY + 1;
		$js = <<<EOD
							yaxis:{
								tickDecimals: 0,
								//max: {$max}
							}
EOD;
		$this->_fn_yaxis = $js;
		return $js;
	}
 
	function _setXYPoints($args){
		$datasets = $args;
		//lines data
		$sets = array();
		foreach ($datasets as $data){
			foreach($data as $key => $point){
				$sets[$key][] = "[".join(",",$point)."]";
				//do a check for max and min value of x,y
				list($x,$y) = $point;
				if ($this->maxX < $x) $this->maxX = $x;
				if ($this->minX > $x) $this->minX = $x;
				if ($this->maxY < $y) $this->maxY = $y;
				if ($this->minY > $y) $this->minY = $y;
			}
		}
		$this->points = $sets;
		return $sets;
	}
 
	function _setXYvars(){
		$XYvars = array();
		foreach($this->points as $linename => $points){
			//$XYvars[] = "var data_$linename = [".join(",",$points)."];";
			$XYvars[] = "{data:[".join(",",$points)."], label:'{$linename}', lines: {show: true}, points: {show: true}}";
		}
 
		$this->_fn_point_vars = join(",\n",$XYvars);
 
		return $this->_fn_point_vars;
	}
 
	function _Mousetracker($args){
		extract($args);
		$max = $this->maxY + 1;
		$js = <<<EOD
							mouse:{
								track: true,
								color: '#ff3f19',
								sensibility: 1, // => distance to show point get's smaller
								position: 'nw',
								trackDecimals: 0,
								trackFormatter: function(obj){ return  obj.y; }
							}
EOD;
		$this->_mousetracker = $js;
		return $js;
	}
 
	function _draw(){
		/* ============================== */
		/* == 2. construct javascript === */
		/* ============================== */
		//create unique JSid based on unixtimestamp
		$JSid = time();
 
		$js = <<<EOD
				/**
				 * Wait till dom's finished loading. This graph show a 5 series. The axis are configured.
				 */
				document.observe('dom:loaded', function(){
					//xaxis formatter
					{$this->_fn_xaxis_formatter}
 
					/**
					 * Draw the graph.
					 */
					var f_{$JSid} = Flotr.draw(
						$('{$this->container}'),[
							{$this->_fn_point_vars}
						],{
							{$this->_fn_xaxis},
							{$this->_fn_yaxis},
							{$this->_mousetracker}
					});
				});
EOD;
		return $js;
	}
}
 

here's an excerpt from my block code:

 
//initialise class with config values
$flotr = new xarFlotr($config);
//will output the javascript to be used in the template
$js = $flotr->_draw();
 

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Powered by Wordpress | WP Premium theme by WP Remix
Copyright 2007. Teddy A Jasin. All rights reserved

• Home
• About