Yii 1.1: using jqbargraph to create beautiful graphs

10 followers

If you are about to create a graph, the best option i would suggest is the jqbargraph.

The advantages of jqbargraph is

  1. its very easy to install
  2. it is very simple to use.
  3. it contains 3 types of graph (simple multi and stacked)
  4. 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

jq1

if you are using simple graph

you should give the first parameter

  • type => simple

The other parameters are

  1. color1: color of the first bar.

  2. color2:color of the second bar.

  3. width:width of each bar.

  4. space:space between each bar.

  5. title:title of the graph, will be shown on the top of the graph.

  6. 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

jq1

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.

jq1

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

Total 1 comment

#14881 report it
P.Vimal Raj Kumar at 2013/09/18 06:24am
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..

Leave a comment

Please to leave your comment.

Write new article