You are viewing revision #1 of this wiki article.
This is the latest version of this article.
If you are about to create a graph, the best option i would suggest is the jqbargraph.
The advantages of jqbargraph is
- its very easy to install
- it is very simple to use.
- it contains 3 types of graph (simple multi and stacked)
- easy customization like colors spaces etc..
So to begin with..
First you need to download the extension and put this is your extensions folder
Now like most of the other widgets you need to configure it in config/main file
'import'=>array(
'application.extensions.jqBarGraph.*',
),
Now you can use the jqbargraph by calling the widget
$this->widget('jqBarGraph',array(parameters));
Now the parameters may vary based on the type of graph you need lets start with the simple graph.
this one is the most commonly used graph
if you are using simple graph
you should give the first parameter
- type => simple
The other parameters are
color1: color of the first bar.
color2:color of the second bar.
width:width of each bar.
space:space between each bar.
title:title of the graph, will be shown on the top of the graph.
values: Most important, should be an multidimensional array like this.
array(array(200,'june'),array(129,'july'),array(143,'august'),array(159,'september'));
so the final code will be
$array=array(array(200,'june'),array(129,'july'),array(143,'august'),array(159,'september'));
$this->widget('jqBarGraph',
array('values'=>$array,
'type'=>'simple',
'width'=>200,
'color1'=>'#122A47',
'color2'=>'#1B3E69',
'space'=>5,
'title'=>'simple graph'));
Now second type of graph is the multigraph
In order to use multigraph the type you should give is
- type=>multi
the other attributes are much similar except we need to give arrays for the colors and legends .
the final code will be like this
$array2=array(array(array(5,15,26),2008),array(array(14,6,26),2009),array(array(17,3,26),2010));
$colors=array('#3D0017','#6B0E1D','#AB2522');
$legends=array('legend1','legend2','legend3');
$this->widget('jqBarGraph',
array('values'=>$array2,
'type'=>'multi',
'width'=>500,
'colors'=>$colors,
'legend'=>true,
'legends'=>$legends,
'title'=>'multi graph'));
The third type of graph is stacked graph.
This has the same parameters as the multigraph except the type
the type should be
- type => stacked
so the final code will be like this
$array3=array(array(array(5,15,26),2008),array(array(14,6,26),2009),array(array(17,3,29),2010));
$colors2=array('#242424','#437346','#97D95C');
$legends2=array('legend1','legend2','legend3');
$this->widget('jqBarGraph',
array('values'=>$array3,
'type'=>'stacked',
'width'=>500,
'colors'=>$colors2,
'legend'=>true,
'legends'=>$legends2,
'title'=>'stacked graph'));
you can see the live demo here
regards
Mahesh E.U
Type 'multi' and 'stacked' graphs are not working.
Hi Mahesh E.U,
I tried this jqBarGraph. Only the type "simple" is working. and other two types are not
working. Could you please help me out..
Thanks in advance..
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.