Yii 2.0: yii2-highcharts-widget

Highcharts Widget for Yii2
4 followers
v4.0.1 (2014-04-24)
v3.0.10 (2014-03-17)
v3.0.9 (2014-02-17)

This extension brings all the functionality of the popular Yii Highcharts extension to your Yii2 project.

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.

Screen Shot

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


Links

Note: Highcharts and Highstock are free for non-commercial use only. For more information, please visit the Highcharts License and Pricing page.


Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist miloschuman/yii2-highcharts-widget "*"

or add

"miloschuman/yii2-highcharts-widget": "*"

to the require section of your composer.json file.


Usage

To use this widget, insert the following code into a view file:

use miloschuman\highcharts\Highcharts;
 
echo Highcharts::widget([
   '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]]
      ]
   ]
]);

By configuring the options property, you can 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:

Highcharts::widget([
   '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 Yii's [[JsExpression]] object. For instance:

    ...
    'tooltip' => [
        'formatter' => new JsExpression('function(){ return this.series.name; }')
    ],
    ...

    Note, this is currently only possible when using a PHP associative array for configuration.

  • 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' => ['enabled' => false],
    ...
  • All adapters, modules, themes, and supplementary chart types must be enabled through the top-level 'scripts' option.

    'scripts' => [
     '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
    ],
    ...

    For a list of available scripts, see the contents of vendor/miloschuman/highcharts/assets/.


Change Log

v4.0.1 (2014-04-24)

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

v3.0.10 (2014-03-17)

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

v3.0.9 (2014-02-17)

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

Be the first person to leave a comment

Please to leave your comment.

Create extension