Demos · Guide · Class Reference · Wiki · Extensions · Forum · Live Chat · Login
search

highcharts

Highcharts Widget
report it
105 followers
Resources
Requirements
Installation
Usage
Tips
Change Log
2013 February 17
2011 December 24
2011 September 25
2011 January 23
2010 October 15
2010 October 7

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

2013 February 17

  • Upgraded Highcharts core library to the latest release (2.3.5). See the Highcharts changelog for more information about what's new in this version.
  • Added support for supplementary chart types: gauge, arearange, areasplinerange, and columnrange.
  • Fix for PHP Notice issue mentioned by nervlin.
  • Changed release numbering scheme to match underlying library version.

2011 December 24

  • Upgraded Highcharts core library to the latest release (2.1.9).
  • Minor bug fix.

2011 September 25

  • Upgraded Highcharts core library to the latest release (2.1.6).
  • Added global theming support.

2011 January 23

  • Added support for PHP versions < 5.3.
  • Upgraded Highcharts core JS library to the latest release (2.1.2).

2010 October 15

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

2010 October 7

  • Initial release.

Total 20 comments

#13115 report it
Maurice_ at 2013/05/06 03:49am
Blank Graph

Hello Guys, there seems to be a problem with stacked graphs and IE8. This code produces a blank graph in IE8, but shows the correct data in another context:

/*
$graphdata2 contains
 
Array ( [0] => Array ( [name] => < 1 month [data] => Array ( [0] => 334 [1] => 30 [2] => 41 [3] => 3335 ) ) [1] => Array ( [name] => >= 1 month <2 months [data] => Array ( [0] => 0 [1] => 10 [2] => 31 [3] => 48 ) ) [2] => Array ( [name] => >= 2 months <3 months [data] => Array ( [0] => 0 [1] => 0 [2] => 9 [3] => 30 ) ) [3] => Array ( [name] => >= 3 months <4 months [data] => Array ( [0] => 0 [1] => 0 [2] => 0 [3] => 10 ) ) [4] => Array ( [name] => >= 4 months <5 months [data] => Array ( [0] => 0 [1] => 0 [2] => 0 [3] => 0 ) ) [5] => Array ( [name] => >= 5 months <6 months [data] => Array ( [0] => 0 [1] => 0 [2] => 0 [3] => 0 ) ) [6] => Array ( [name] => >6 months [data] => Array ( [0] => 0 [1] => 0 [2] => 0 [3] => 0 ) ) )
*/
 
$categories2 = array('3 months ago','2 months ago','1 month ago','newest');
$bar_data2   = array(array(
                         'name' => '< 1 month',
                         'data' => $graphdata2['zero_thirty']
                     ), 
                     array(
                         'name' => '>= 1 month <2 months',
                         'data' => $graphdata2['thirty_sixty']
                     ),
                     array(
                         'name' => '>= 2 months <3 months',
                         'data' => $graphdata2['sixty_ninety']
                     ),                      
                     array(
                         'name' => '>= 3 months <4 months',
                         'data' => $graphdata2['ninety_hundredtwenty']
                     ),
                     array(
                         'name' => '>= 4 months <5 months',
                         'data' => $graphdata2['hundredtwenty_hundredfifty']
                     ),
                     array(
                         'name' => '>= 5 months <6 months',
                         'data' => $graphdata2['hundredfifty_hundredeighty']
                     ),
                     array(
                         'name' => '>6 months',
                         'data' => $graphdata2['hundredeighty_openend']
                     )
             );
 
$this->Widget('ext.highcharts.HighchartsWidget', array(
   'options'=>array(
      'colors'   => array('#0000cc', '#cc0000', '#33cc66', '#660099', '#33ccff', '#ff9900', '#3399ff'),
      'chart'    => array('type' =>'column'),
      'title'    => array('text' => 'Graph for last 4 Months'),
      'xAxis'    => array(
                      'categories' => $categories2
                    ),
      'yAxis'     => array(
                       'min' => '0',
                       'max' => '300',
                       'title' => array(
                           'text' => 'Suppressed'                          
                        ),  
                        'stackLabels' => array(
                          'enabled' => 'true',
                          'style'   => array(
                              'fontWeight' => 'bold',
                              'color' => '(Highcharts.theme && Highcharts.theme.textColor) || \'gray\''
                          )
                        )                  
                ),
       'plotOptions' => array('column' => array('stacking' => 0.2, 'borderWidth' => 0)),
       'series' => $bar_data2
       )
 ));

This line seems to be problematic:

'plotOptions' => array('column' => array('stacking' => 0.2, 'borderWidth' => 1)),

When I remove this line, it works.

Any ideas?

#12193 report it
bardoo at 2013/03/05 10:42am
excel export

hi, i m looking for a way to export a chart to excel?

#12187 report it
Milo S at 2013/03/04 11:14pm
Re: Flag Series

Jonathan, flag series are currently only available via the highstock library. You would need to load that JavaScript file separately and proceed from there. See this forum post for more info.

#12171 report it
staticblue at 2013/03/04 05:56am
Awesome extension !

Thanks a lot for this :)

Is it possible to use the flags series type with this widget ? If so, could you please post an example of how to use it on a series ?

Thanks, Jonathan

#11533 report it
paskuale at 2013/01/18 03:39pm
fork it

anyone fork repo? Then upgrade all ^_^

#11520 report it
manuel-84 at 2013/01/18 06:56am
update

I tried to contact the author but he still have to reply... I'll upload a new extension if needed

#11519 report it
karmraj at 2013/01/18 06:47am
Highchart not working in latest version 1.1.13

I have created my application in Yii framework version 1.1.9 and use highcharts for display data in graphical format. Its working awsome but today i have upgrade my framework version to 1.1.13. Now i can not get chart in latest version of framework.

Please help me.

#11518 report it
paskuale at 2013/01/18 04:46am
Highcharts.getOptions().colors,

Thanks for share it! How can retrieve color array from highchart?

this js line-> var colors = Highcharts.getOptions().colors how can do it in widget ?

thanks

#11490 report it
GoofyX at 2013/01/16 11:46am
Directly contact the author

@manuel-84, I suggest that you PM the author directly and send your files.

#11489 report it
manuel-84 at 2013/01/16 11:11am
update

I updated this extension to the latest highcharts 2.3.5 and improved the way scripts are loaded

If the author or someone else are interested PM me

#10786 report it
Jorge A. at 2012/11/23 09:06am
Congratulations

Thank you very much!!! excelent job

#10125 report it
paskuale at 2012/10/05 06:21am
version update howto ?

Today it's on Version 2.3.3 (2012-10-04) I must refresh plugin folder or wait for this extension upgrade ?

thanks

#8310 report it
dudunegrinhu at 2012/05/24 12:31pm
Refresh button

Is there any way to add a refresh button in ajax to refresh the chart?

#8209 report it
deez at 2012/05/17 04:25pm
tooltips?

Has anyone had problems making the tooltips work?

EDIT: Using Yii 1.1.10, you need to replace the highcharts.js and the highcharts.src.js files with the latest ones from the highcharts website and tooltips will be fixed.

#8205 report it
sirin k at 2012/05/17 12:27pm
The widget form of the example given in http://www.highcharts.com/demo/pie-basic
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<?php
 
$this->Widget('ext.highcharts.HighchartsWidget', array(
   'options'=>array(
      'chart'=> array(
            'renderTo'=>'container',
            'plotBackgroundColor'=> null,
            'plotBorderWidth'=> null,
            'plotShadow'=> false
        ),
      'title' => array('text' => 'Browser market shares at a specific website, 2010'),
        'tooltip'=>array(
                'formatter'=>'js:function() { return "<b>"+ this.point.name +"</b>: "+ this.percentage +" %"; }'
                     ),
        'plotOptions'=>array(
            'pie'=>array(
                'allowPointSelect'=> true,
                'cursor'=>'pointer',
                'dataLabels'=>array(
                    'enabled'=> true,
                    'color'=>'#000000',
                    'connectorColor'=>'#000000',
                    'formatter'=>'js:function() { return "<b>"+ this.point.name +"</b>:"+this.percentage +" %"; }'  
 
                                   )
                        )
                 ),
 
      'series' => array(
         array('type'=>'pie','name' => 'Browser share', 'data' => array(array('Firefox',45.0),array('opera',26.8),array('Safari',8.5),array('Opera',6.2),array('Others',0.7),array(
                    'name'=>'Chrome',
                    'y'=>12.8,
                    'sliced'=>true,
                    'selected'=>true
                    ))),
 
      )
 
   )
));
 
?>

Hope this would help someone trying for more customized chart dispaly.

-Sirin k

#8074 report it
SebK at 2012/05/08 01:44pm
Typecast to float if not int

Several people seem to struggle with using data directly from a CActiveDataProvider. One suggestion has been to typecast to int. I needed floats, which I assumed my numbers were (must have been strings?!?). Either way, typecast to integer or float and the array from the data provider should work.

$data = $provider->getData();
$graph = array();
array_push($graph, (float) $myObject->value);
#7141 report it
GoofyX at 2012/02/27 09:06am
Highcharts 2.2.1 has been released

2.2.1 has been released. Changelog here. Can you please include the newer version?

#6952 report it
yiimann at 2012/02/15 12:07pm
yes

the best chart ever. thanks

#6254 report it
Gavyn 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 report it
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'])

Leave a comment

Please to leave your comment.

Create extension
Search Extensions
Downloads
See all »
Related Extensions
 

Yii Supporters

  • The Ext4Yii Framework is a professional PHP Yii extension which provides server-side ExtJS functionality.
Terms of Service | License | Contact Us
Copyright © 2013 by Yii Software LLC. All Rights Reserved.