using jqbargraph to create beautiful graphs

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

5 0
9 followers
Viewed: 11 410 times
Version: 1.1
Category: Tips
Written by: MAHESH.E.U
Last updated by: MAHESH.E.U
Created on: Mar 19, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history

Related Articles