1. Documentation
2. Change Log

This extension encapsulates the jQuery flot graph library see flot

Flot says:

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE).

Documentation ¶

Requirements ¶

• Yii 1.1 or above (not tested on 1.0 but might work)

Installation ¶

• Extract the release file under protected/extensions
• The API doc is included in assets
• the pie plugin is documented in assets/flotpie.html

Usage ¶

See the following code example:

<!--
example view for flot graphs
-->

<h1>Flot</h1>
<?php 
// lines and bars in same graph
 
$this->widget('application.extensions.EFlot.EFlotGraphWidget', 
	array(
		'data'=>array(
			array(
				'label'=> 'line', 
				'data'=>array(
					array(1,1),
					array(2,7),
					array(3,12),
					array(4,32),
					array(5,62),
					array(6,89),
				),
				'lines'=>array('show'=>true),
				'points'=>array('show'=>true),
			),
			array(
				'label'=> 'bars', 
				'data'=>array(
					array(1,12),
					array(2,16),
					array(3,89),
					array(4,44),
					array(5,38),
				),
				'bars'=>array('show'=>true),
			),
		),
		'options'=>array(
				'legend'=>array(
					'position'=>'nw',
					'show'=>true,
					'margin'=>10,
					'backgroundOpacity'=> 0.5
					),
		),
		'htmlOptions'=>array(
			   'style'=>'width:400px;height:400px;'
		)
	)
);
?>

//Pie chart example

<?php  
$format_func = <<<EOD
js:function(label, series){
	return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';}
EOD;
$this->widget('application.extensions.EFlot.EFlotGraphWidget', 
	array(
		'data'=>array(
			array('label'=>'cows', 'data'=>20),
			array('label'=>'sheep', 'data'=>20),
			array('label'=>'chickens', 'data'=>30),
		),
		'options'=>array(
			'series'=> array('pie'=>array(
				'show'=>true,
				'radius'=> 3/4,
				'formatter'=> $format_func,
				),
			),
			'legend'=> array('show'=>false),
		),
		'htmlOptions'=>array('style'=>'width:400px;height:400px;')
	)
);
?>

Change Log ¶

May 4, 2010 ¶

• Initial release.

  May 5, 2010 ¶

• V1.1
• Rezipped to create EFlot dir under extensions
• Cleaned up case errors in includes (thats what happens if you develop in Windows..)
• t.b.d. auto include of other js-plugins when specified in data or options