highcharts

Highcharts Widget

Resources

This extension encapsulates the Highcharts graphing widget.

Screen Shot

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Compared to the other JavaScript charting libraries (Flot, jqPlot), Highcharts requires a more verbose configuration but also produces higher quality (animated) graphs, supports more advanced options without plugins, and uses only a single JavaScript file.

Please use the 'Reviews' tab only for reviews. If you have questions, requests, or bug reports use the links below.

Resources ¶

Note: Highcharts is not free for commercial use. For more information, please visit the Highcharts License and Pricing page.

Requirements ¶

Yii 1.0 or above
PHP 5.1 or above

Installation ¶

Extract the release file under protected/extensions

Usage ¶

To use this widget, you may insert the following code in a view:

$this->Widget('ext.highcharts.HighchartsWidget', array(
   'options'=>array(
      'title' => array('text' => 'Fruit Consumption'),
      'xAxis' => array(
         'categories' => array('Apples', 'Bananas', 'Oranges')
      ),
      'yAxis' => array(
         'title' => array('text' => 'Fruit eaten')
      ),
      'series' => array(
         array('name' => 'Jane', 'data' => array(1, 0, 4)),
         array('name' => 'John', 'data' => array(5, 7, 3))
      )
   )
));

By configuring the options property, you may specify the options that need to be passed to the Highcharts JavaScript object. Please refer to the demo gallery and documentation on the Highcharts website for possible options.

Alternatively, you can use a valid JSON string in place of an associative array to specify options:

$this->Widget('ext.highcharts.HighchartsWidget', array(
   'options'=>'{
      "title": { "text": "Fruit Consumption" },
      "xAxis": {
         "categories": ["Apples", "Bananas", "Oranges"]
      },
      "yAxis": {
         "title": { "text": "Fruit eaten" }
      },
      "series": [
         { "name": "Jane", "data": [1, 0, 4] },
         { "name": "John", "data": [5, 7,3] }
      ]
   }'
));

Note: You must provide a valid JSON string (e.g. double quotes) when using the second option. You can quickly validate your JSON string online using JSONLint.

Tips ¶

If you need to use JavaScript in any of your configuration options (e.g. inline functions), use the js: prefix. For instance:

...
'tooltip' => array(
   'formatter' => 'js:function(){ return this.series.name; }'
),
...

Highcharts by default displays a small credits label in the lower right corner of the chart. This can be removed using the following top-level option.

...
'credits' => array('enabled' => false),
...

Since version 0.2, this widget will display buttons from the Exporting module in the upper right corner of the chart. These can be removed using the following top-level option.

...
'exporting' => array('enabled' => false),
...

The Exporting module script file will not be registered if all highcharts widgets on a page have this option set to false.

Global theming support was added in version 0.4. To specify a global theme, set the top-level 'theme' option to the name of the desired theme file without the trailing ".js".

...
'theme' => 'dark-blue',
...

Four sample themes are provided in protected/extensions/highcharts/assets/themes/. Any custom theme files must be saved in this same directory.

Change Log ¶

December 24, 2011 ¶

Upgraded Highcharts core library to the latest release (2.1.9). See the Highcharts changelog for more information about what's new in this version.
Minor bug fix.

September 25, 2011 ¶

Upgraded Highcharts core library to the latest release (2.1.6). See the Highcharts changelog for more information about what's new in this version.
Added global theming support.

January 23, 2011 ¶

Added support for PHP versions < 5.3.
Upgraded Highcharts core JS library to the latest release (2.1.2). See the Highcharts changelog for more information about what's new in this version.

October 15, 2010 ¶

Added support for the Exporting module, which allows users to download images or PDF's of your charts. See documentation for more details.
Fixed bug which prevented this widget from rendering in a different container.

October 7, 2010 ¶

Initial release.

Total 20 comments

#6952

yiimann at 2012/02/15 12:07pm

yes

the best chart ever. thanks

#6254

gf010010 at 2011/12/22 02:19am

Can it works with CActiveDataProvider?

Can it works with CActiveDataProvider, just like CGridView?How can I pass a dataprovider to Highcharts's series?Thanks!

#6119

nervlin at 2011/12/14 01:33am

runtime notice fix

Try fix it out

if(isset($this->options['exporting']['enabled']))

from

// register exporting module if enabled via the 'exporting' option if($this->options['exporting']['enabled'])

// register global theme if specified vie the 'theme' option if($this->options['theme'])

#5918

compact_corpse at 2011/11/24 12:45pm

Make sure data is correct type

If you use this:

'series' => array(
         array('name' => 'Number of Calls', 'data' => $data)
      )

where $data is supposed to by an array of integers, typecast them to integers to make it work.

foreach($dataArray as $ct){
    $data[]=(int) $ct;
}

Otherwise it will take the first integer and use it as the title and the second integer will be the value (the issue @rulight was having).

#5542

rahul.vit09 at 2011/10/19 02:35am

why highchartis giving different results with similar data structure?

I am using high chart in my yii based application.

after querying the database I am storing the result in a associative array named $catexp after printing the structure using print_r($catexp) I am getting follwing

Array ( [0] => Array ( [name] => Food [y] => 91 ) [1] => Array ( [name] => Utilities [y] => 9 ) )

now this the structure of data which can be passed to highcart for generating pie chart.

but after passing this $catexp as data for pie chart I am getting wired output i.e. i am not getting the full chart and as the no. of entries increasing the chart becoming shorter and shorter.

pie-short

although i made a similar manual array structure like this

$a = array('name'=> 'Opera','y'=>91);
        $b = array('name'=> 'Safari','y'=>9);
        $c = array($a,$b);

print_r($c) gives

Array ( [0] => Array ( [name] => Opera [y] => 91 ) [1] => Array ( [name] => Safari [y] => 9 ) )

and passed this variable as data for pie chart and i got the full chart.

pie-full

So my question is what is wrong with my previous chart both the array structures are same but output is diff?????

#5218

peterjkambey at 2011/09/22 11:23pm

Wonderful..

so great....

Thank you for highchart, thank you for milomilo. as a custom developer for office application, tools like this is very very very usefull...

Thanks again..

Update: New High-Chart Support Theme Option, easily.... greatttt.. thx milomilo...

#4093

h3rm@n at 2011/06/05 09:36pm

nice

nice extention :) thank you

#3276

nickcv at 2011/03/30 08:10pm

too good to be true

another thing i'll have to pay a license for...

great extension btw! gonna keep an eye on this

#3277

nickcv at 2011/03/30 08:10pm

too good to be true

another thing i'll have to pay a license for...

great extension btw! gonna keep an eye on this

#3020

nereia at 2011/03/08 06:02am

@rulight Problem sending data

Hi, I had this problem too, and I found the solution.. if you do the chart in this way:

'series' => array( array('name' => 'Average', 'data' => array($avlength, $avspeed,$totaltime)),

and $avlength=23; the result of the chart is the label 2 and the value 3 (maybe this is a bug, I don't knoW) instead you must create the chart in this way:

'series' => array( array('name' => 'Average', 'data' => array(array('av',$avlength),array('av',$avspeed),array('av',$totaltime))),

In this way the result would be label 'av' and the correct value (23),

I think that this is what is happening to you : Array ( [0] => 18 [1] => 18.5 [2] => 18.75 ) the label is always 1 and the value is 8.....

#2946

groc426 at 2011/02/28 09:39pm

Pie Chart

@sbasuki - You may have figured it out but for those who haven't; to pass data to a pie chart use a multidimensional array. For example:

'series' => array(
    array('type' => 'pie',
          'name' => 'Pie Chart', 
          'data' => array(array(Foo, 1), array(Bar, 2), array(FooBar, 3)
         )
)

Great extention! Thank you!

#2797

sbasuki at 2011/02/11 08:08pm

Sample Pie Chart

Great Extension, it helps me...

How to display pie chart using highcharts?

#2768

rulight at 2011/02/07 08:55pm

Problem sending data

Great extension!

By the way I was trying to populate data for series.

'series' => array( array('name' => 'Line1', 'data'=> array($dataY)), array('name' => 'Line2', 'data' => array(16, 16, 17)) )

Where $dataY is an array like this: Array ( [0] => 18 [1] => 18.5 [2] => 18.75 )

But the chart only displays well Line2 and Line1 only gets (8,8,8) I am doing something wrong?

Thanks.

#2646

milomilo at 2011/01/24 11:45pm

Version 0.3 (no longer) missing HighchartsWidget.php

Thank you, canreo, for pointing out the missing file. I re-uploaded the highcharts-v0.3.zip package with all files included. Cheers!

#2640

canreo at 2011/01/24 01:47pm

Version 0.3 missing HighchartsWidget.php

Could you please double check your recent 0.3 package? You seem to be missing "HighchartsWidget.php" All I see are the .js file. Thanks!

#2616

milomilo at 2011/01/23 03:36pm

Yii Highcharts Widget now works with PHP 5.1 and 5.2

aravaro, thanks for the error info. I have just released version 0.3 which is compatible with earlier versions of PHP. Happy coding!

#2447

lui10e6 at 2011/01/03 11:52am

can it work with ajax?

Hi, unfortunately i am not able to apply this with ajax call. can this work upon ajax call? thanks.

#2255

arvaro at 2010/12/02 01:41pm

version de php

necesita: PHP 5 >= 5.3.0 con una versión menor da error

Fatal error: Call to undefined function array_replace_recursive() in protected/extensions/highcharts/HighchartsWidget.php on line 94

#29

scoob.junior at 2010/10/07 07:44pm

in a single word

amazing!

thanks very much!

#30

monico at 2010/10/07 02:01pm

Great job

Hi, milomilo. Great job. I just downloaded it and its working fine ! Thanks

Please login to leave your comment.