How to make Bar Chart in YII Framework (using ext yii.Highcharts)

Hello again everyone, this last few weeks, i’ve been dealing with Graph in Java Web, espescially using D3.js but i’ll share about D3 in my next post may be.

Last time i posted about Yii Framework and now i will add one more post about it. Now, i want to share just a simple post (again) about how to make charts in Yii Framework. Well, may be you notice that i really like to use yii framework to my side-projects (outside of my works in the office building). Yes, i really like it. One of my reason is i can do the things in yii easily and more efficient code. Like one in THIS POST.

Well, back to Highcharts~ On my last projects, turns out that i need to make some graph on it, then, ok i will try some of it. One of the way to make it is using yii extension, and one of the famous one is Yii Highcharts. Well, now i will share about how to using it in my yii projects.

First, we need to download and extract yii.highchart extenstion inside protected/extensions folder. Do not forget to remove the version number in the folder name. Just like this :

Now, we need to modify config/main.php to add yii.highchart extension, on this line :

// autoloading model and component classes
‘import’=>array(
‘application.models.*’,
‘application.components.*’,
‘ext.yii-highcharts.*’,
‘ext.print.*’,
),

then we can use highchart extension like this -> “ext.yii-highcharts.highcharts.HighchartsWidget”

And we’re ready to use our highchart ext.

// BEGIN BAR CHART
$this->widget(‘ext.yii-highcharts.highcharts.HighchartsWidget’, array(
‘options’=>array(
‘chart’=> array(‘defaultSeriesType’=>’column’,),
‘title’ => array(‘text’ => ‘Fruits’),
‘legend’=>array(‘enabled’=>false),
‘xAxis’=>array(‘categories’=>array(‘Apples’, ‘Mangos’, ‘Strawberries’, ‘Grapes’, ‘Oranges’),),
‘yAxis’=> array(
‘min’=> 0,
‘title’=> array(
‘text’=>’Total’
),
),
‘series’ => array(
array(‘data’ => array(10,9,13,15,20))
),
‘tooltip’ => array(‘formatter’ => ‘js:function() {return “<b>”+ this.x +”</b><br/>”+”Fruits : “+ this.y; }’),
‘plotOptions’=>array(‘pie’=>(array(
‘allowPointSelect’=>true,
‘showInLegend’=>true,
‘cursor’=>’pointer’,
)
)
),
‘credits’=>array(‘enabled’=>false),
)
));

And the chart will looks like this :

Also, we can configure more about the chart widgets where you can read more here -> http://www.yiiframework.com/extension/highcharts/

Okay , that’s all. A very very simple post this morning. Btw, i”ve used plugin for syntax highlighter years ago, but looks like it doesn’t appear anymore. T.T

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s