Yii 1.1: highcharts

Highcharts Widget
121 followers
v3.0.10 (2014-03-17)
v3.0.9 (2014-02-17)
v3.0.5 (2013-09-23)
v3.0.4 (2013-08-02)
v3.0.2 (2013-07-22)
v2.3.5 (2013-02-17)
v0.5 (2011-12-24)
v0.4 (2011-09-25)
v0.3 (2011-01-23)
v0.2 (2010-10-15)
v0.1 (2010-10-07)

This extension allows you to embed Highcharts graphs easily into your views.

Screen Shot

Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Highstock lets you create stock or general timeline charts in pure JavaScript, including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning.

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


Links

Note: Highcharts is free for non-commercial use only. 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 3.0.2, all adapters, modules, themes, and supplementary chart types must be enabled through the top-level 'scripts' option.

    ...
    'scripts' => array(
       'highcharts-more',   // enables supplementary chart types (gauge, arearange, columnrange, etc.)
       'modules/exporting', // adds Exporting button/menu to chart
       'themes/grid'        // applies global 'grid' theme to all charts
    ),
    ...

    Previous versions relied on auto-detection magic, but that became less reliable as Highcharts evolved. The new method more accurately follows the native process of including/excluding additional script files and gives the user some finer-grain control. For a list of available scripts, see the contents of protected/extensions/highcharts/assets/.

Change Log

v3.0.10 (2014-03-17)

  • Upgraded Highcharts core library to the latest release (3.0.10). See the Highcharts changelog for more information about what's new in this version.
  • Bugfix for active highcharts

v3.0.9 (2014-02-17)

  • Upgraded Highcharts core library to the latest release (3.0.9).
  • Added Composer support.
  • Added ActiveHighstockWidget. Please see class file for documentation.

v3.0.5 (2013-09-23)

  • Upgraded Highcharts core library to the latest release (3.0.5).
  • Added support for Highstock library via HighstockWidget class.
  • Resolved issue #1: Themes not applied when in debug mode.

v3.0.4 (2013-08-02)

  • Upgraded Highcharts core library to the latest release (3.0.4).

v3.0.2 (2013-07-22)

  • Upgraded Highcharts core library to the latest release (3.0.2).
  • The top-level 'scripts' option was added (per Meng's recommendation) to streamline the inclusion of Highcharts' expanding catalog of adapters, modules, themes, and extended chart types. See "Tips" section above.

v2.3.5 (2013-02-17)

  • Upgraded Highcharts core library to the latest release (2.3.5).
  • 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.

v0.5 (2011-12-24)

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

v0.4 (2011-09-25)

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

v0.3 (2011-01-23)

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

v0.2 (2010-10-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.

v0.1 (2010-10-07)

  • Initial release.

Total 20 comments

#16876 report it
Arnold Gultom at 2014/04/06 04:57am
Is it possible exports without internet connection?

Just like my title, is it possible exports without internet connection? Thanks a lot for replying

#16276 report it
ptv1p3r at 2014/02/05 05:30am
Drilldown

Thank you patrice, you are a life saver, i finnaly got the drilldown working :-) wow..

Just one remark for this extention, i had to download the newest highcharts lib, and extract the drilldown module from it to the extension modules, after that it all came together... thank you so much patrice for the help!!!

#16268 report it
Patrice at 2014/02/04 06:43pm
Sample for DrillDown

@ptv1p3r, this is a model for a PHP-driven drilldown. Hope this helps.

<?php
$this->pageTitle=Yii::app()->name . ' - '.Yii::t('app','Highcharts');
?>
<h1><?php echo Yii::t('app','Highcharts').' Column DrillDown'; ?></h1>
 
<?php
 
$level1 = array();
$level1[] = array('name' => 'GroupOne', 'y' => 11, 'drilldown' => 'dd1');
$level1[] = array('name' => 'GroupTwo', 'y' => 22, 'drilldown' => 'dd2');
$level1[] = array('name' => 'GroupThree', 'y' => 33, 'drilldown' => 'dd3');
 
$level2 = array();
$level2[] = array('id' => 'dd1', 'data' => array(array('Detail1', 1), array('Detail2', 2), array('Detail3', 4)));
$level2[] = array('id' => 'dd2', 'data' => array(array('Detaila', 8), array('Detailb', 9), array('Detailc', 3)));
$level2[] = array('id' => 'dd3', 'data' => array(array('DetailX', 7), array('DetailY', 5), array('DetailZ', 6)));
 
$this->Widget('ext.highcharts.HighchartsWidget', array(
        'scripts' => array(
        'modules/drilldown', // in fact, this is mandatory :)
        ),
    'options'=>array(
        'chart' => array('type' => 'column'),
        'title' => array('text' => Yii::t('app','Levels 1 and 2')),
        'subtitle' => array('text' => Yii::t('app','Click the columns to view details.')),
        'xAxis' => array('type' => 'category'),
        'yAxis' => array('title' => array('text' => Yii::t('app','Vertical legend')),),
        'legend' => array('enabled' => false),
        'plotOptions' => array (
            'series' => array (
                            'borderWidth' => 0,
                            'dataLabels' => array(
                                'enabled' => true,
                            ),
                        ),
                    ),
        'series' => array (array(
                        'name' => 'MyData',
                        'colorByPoint' => true,
                        'data' => $level1,
                    )),
        'drilldown' => array(
                        'series' => $level2,
                    ),
    ),
));
 
?>
#16263 report it
ptv1p3r at 2014/02/04 05:29am
drilldown

Thanks patrice, but my problem isn't the script's, it really is the code.. taking this example of a simple chart column :

$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))
        )
    ),
    'htmlOptions'=>array(),
    // register additional scripts
    'scripts'=>array( 'highcharts-more', 'modules/exporting', 'adapters/mootools-adapter' ),
    // register themes
    'themes'=>array( 'grid' ),
));

What's the correct way to add a simple drilldown on the categorie Apples with this simple data : Red Apples => 2 and Green Apples => 3 ?

I've searched all around and i can't seem to find a tutorial on adding drilldown :-(....

#16255 report it
Patrice at 2014/02/03 03:39pm
about drilldown

I had to register some scripts in order to run a drilldown on my localhost (not sure it's the same issue for you, let me know if there is another problem).

$this->Widget('ext.highcharts.HighchartsWidget', array(
  'scripts' => array(
       'modules/data', // read csv data
       'modules/drilldown', // drilldown mecanism (necessary)
  ),
#16244 report it
ptv1p3r at 2014/02/03 05:28am
Drilldown

First congrats on this extension, it's really good, but i'm having a bit of a problem when i need to make a drilldown chart.

All i need is a working example of a column chart with a simple drilldown, so i can figure out how drilldown is suposed to work, can anyone help me out please ?

#15328 report it
Alex.net at 2013/10/29 12:06pm
No lines shown until zoomIn/zoomout page

Hello folks, There is strange problem with 3.0.5 version, it simple doesn't show lines until browser's zoom is changed. I'd tried with the latest Chrome and Firefox even Yandex(Chrome), does anyone familar with this ?

#14135 report it
canreo at 2013/07/22 11:50am
Yii 1.1.14 release candidate

Thanks for the 3.0.2 update, Milo.

Have you tried it using Yii 1.1.14 RC? I can't seem to get a simple pie chart to work, however, my bar charts work just fine. 1.1.13 works without problems.

#14078 report it
migueArgentina at 2013/07/17 02:29pm
2 simple doubts

Thanks for this awesome extension!

In a PIE chart, how can I:

1) Set 'gradient' to true?

2) Format legend like (browsers example): 'Chrome: 12.8%'?

#13934 report it
Meng at 2013/07/08 04:56am
Enhancement on include additional javascript files such as highcharts-more.js

Highcharts version 3 released, there are additional charts and modules included in the new release.

Current extension auto include the highcharts-more.js by checking on the chart type options. There are some new chart types in version 3 not cater by the current extension, in order to support the new charts, modify to the extension is required. Meanwhile, Highcharts support multiple axes with different chart type by configure each of them in the series options, not in chart options. (Highcharts Demo - Multiple axes). This make the detection become much more difficult.

Also, the extension cater to include only exporting.js module, not for any others.

// register exporting module if enabled via the 'exporting' option
if(isset($this->options['exporting']['enabled']) && $this->options['exporting']['enabled'] === true) {
    $scriptFile = YII_DEBUG ? 'exporting.src.js' : 'exporting.js';
    $cs->registerScriptFile("$baseUrl/modules/$scriptFile");
}
 
// register supplemental chart types library if needed
if(isset($this->options['chart']['type']) && in_array($this->options['chart']['type'], array('gauge', 'arearange', 'areasplinerange', 'columnrange'))) {
    $scriptFile = YII_DEBUG ? 'highcharts-more.src.js' : 'highcharts-more.js';
    $cs->registerScriptFile("$baseUrl/$scriptFile");
}
 
// register global theme if specified via the 'theme' option
if(isset($this->options['theme'])) {
    $scriptFile = $this->options['theme'] . ".js";
    $cs->registerScriptFile("$baseUrl/themes/$scriptFile");
}

to overcome the problems mentioned above, i suggest to modify the code a little bit.

class HighchartsWidget extends CWidget {
 
    public $options = array();
    public $htmlOptions = array();
    public $scripts = array();
    public $themes = array();
 
    /**
     * Renders the widget.
     */
    public function run() {
        $id = $this->getId();
        $this->htmlOptions['id'] = $id;
 
        echo CHtml::openTag('div', $this->htmlOptions);
        echo CHtml::closeTag('div');
 
        // check if options parameter is a json string
        if(is_string($this->options)) {
            if(!$this->options = CJSON::decode($this->options))
                throw new CException('The options parameter is not valid JSON.');
            // TODO translate exception message
        }
 
        // merge options with default values
        $defaultOptions = array('chart' => array('renderTo' => $id));
        $this->options = CMap::mergeArray($defaultOptions, $this->options);
        $jsOptions = CJavaScript::encode($this->options);
        $this->registerScripts(__CLASS__ . '#' . $id, "var chart = new Highcharts.Chart($jsOptions);");
    }
 
    /**
     * Publishes and registers the necessary script files.
     *
     * @param string the id of the script to be inserted into the page
     * @param string the embedded script to be inserted into the page
     */
    protected function registerScripts($id, $embeddedScript) {
        $basePath = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR;
        $baseUrl = Yii::app()->getAssetManager()->publish($basePath, false, 1, YII_DEBUG);
        $scriptFile = YII_DEBUG ? '/highcharts.src.js' : '/highcharts.js';
 
        $cs = Yii::app()->clientScript;
        $cs->registerCoreScript('jquery');
        $cs->registerScriptFile($baseUrl . $scriptFile);
 
        // register additional scripts
        foreach( $this->scripts as $script ) {
            $scriptFile = YII_DEBUG ? $script.'.src.js' : $script.'.js';
            $cs->registerScriptFile("$baseUrl/$scriptFile");
        }
 
        // register themes
        foreach( $this->themes as $theme ) {
            $scriptFile = $theme.'.js';
            $cs->registerScriptFile("$baseUrl/themes/$scriptFile");
        }
 
        $cs->registerScript($id, $embeddedScript, CClientScript::POS_LOAD);
    }
}

i added 2 properties

public $scripts = array();
    public $themes = array();

and changed the registerScripts function

// register additional scripts
        foreach( $this->scripts as $script ) {
            $scriptFile = YII_DEBUG ? $script.'.src.js' : $script.'.js';
            $cs->registerScriptFile("$baseUrl/$scriptFile");
        }
 
        // register themes
        foreach( $this->themes as $theme ) {
            $scriptFile = $theme.'.js';
            $cs->registerScriptFile("$baseUrl/themes/$scriptFile");
        }

to use the additional scripts, you will need to include them manually

$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))
        )
    ),
    'htmlOptions'=>array(),
    // register additional scripts
    'scripts'=>array( 'highcharts-more', 'modules/exporting', 'adapters/mootools-adapter' ),
    // register themes
    'themes'=>array( 'grid' ),
));
#13739 report it
Nur Rochim at 2013/06/20 03:10pm
Adding link

How to adding link in bar/graph?

#13708 report it
mshakeel at 2013/06/19 01:13am
Re: How can i remove the print option?

You can find a solution here to work with individual buttons.

#13625 report it
Roy M J at 2013/06/12 06:06am
How can i remove the print option?

Hi,

How can i remove the print option alone?

I got the option for removing the entire export icons listed on top right corner, but how can i remove only one and use the other?

'exporting' => array('enabled' => false),
#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 Schuman 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.

Leave a comment

Please to leave your comment.

Create extension