YII - How to Use Highcharts in your Yii Projects

Many times, you will come across situations, where you have to include or display simple charts like pie, graph, bar-graph, columns and lines to represent information on your website like growth, progress, attendance etc.

There are many tools that are available to include charting functionality but choosing a right charting tool that fulfills your current needs as well as future requirements is difficult. One has to carefully analyze all the factors and choose the best suited tool.

Here we are going to discuss one of the most popular charting tools ("HIGHCHARTS") and how to implement them in your Yii PHP development. It is a powerful tool that can help you outline and enhance your data visualization of the data you want to display within your website in form of charts.

What is HIGHCHART?

Highcharts is a JavaScript library which is used to incorporate interactive charts in your application through a simple & easy approach. Highcharts offer various types of charts like column, line, bar, pie, spline, scatter, etc.

To use any of the charts provided by Highcharts in your Yii application, follow the below steps:

Step1: Download the appropriate version of highcharts extension from:

http://www.yiiframework.com/extension/highcharts/ .

Step2: Unpack it to the protected/extensions folder under your Yii installation.

Step3: This extension can then be used in the form of a widget(PHP) or through java-script in your website. I am using the PHP widget(as below) which is just placed in the view file:

$this->Widget('ext.highcharts.HighchartsWidget', array(
'options'=>array(
'title' => array('text' => 'Student Count in Universities'),
'xAxis' => array(
'categories' => array('Uni-A', 'Uni-B', 'Uni-C', 'Uni-D')
),
'yAxis' => array(
'title' => array('text' => 'Number of students')
),
'series' => array(
array('name' => 'Alpha', 'data' => array(10, 0, 44, 52),
array('name' => 'Beta', 'data' => array(54, 47, 30, 87) ,
array('name' => 'Gamma', 'data' => array(52, 76, 63, 12))
)
)
));

Step4: Now your chart is displayed on your site & you can see it by typing the appropriate URL for that view in your browser.

References:

The official website for the Highcharts is http://www.highcharts.com .

Tip: The "Edit in jsFiddle" available in every highchart demo at http://www.highcharts.com/demo/ is an excellent tool for exploring different options for each chart instantly.