miloschuman/yii2-highcharts-widget Highcharts widget for Yii 2 Framework.

extensionwidgethighchartshighstockhighmaps

Yii2 Highcharts Widget

Latest Stable Version Total Downloads Stars Scrutinizer Code Quality License

Easily add Highcharts, Highstock and Highmaps graphs to your Yii2 application.

Screen Shot

About

Highcharts

Create interactive charts easily for your web projects. Used by tens of thousands of developers and 59 out of the world's 100 largest companies, Highcharts is the simplest yet most flexible charting API on the market.

Highstock

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.

Highmaps

Build interactive maps to display sales, election results or any other information linked to geography. Perfect for standalone use or in dashboards in combination with Highcharts!

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require miloschuman/yii2-highcharts-widget

or add

"miloschuman/yii2-highcharts-widget": "^8.0"

to the require section of your composer.json file.

Usage

Preferred Method (using PHP arrays)

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.

See /doc/examples for more usage examples.

Alternative Method (using JSON string)

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

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] }
      ]
   }'
]);

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

Just the Assets

If you merely want to include the Highcharts/Highstock/Highmaps javascript libraries in your view, you can bypass the widget and access the asset bundle directly:

use miloschuman\highcharts\HighchartsAsset;

HighchartsAsset::register($this)->withScripts(['modules/stock', 'modules/exporting', 'modules/drilldown']);

In this scenario, you would need to write and include your own JavaScript to display the charts, just as illustrated in the Highcharts Demo, Highstock Demo and Highmaps Demo pages.

Tips

  • As of v10, This extension uses Asset Packagist to load the required Highcharts assets, so there is no need to change the version number in your composer.json file until the next major release.

    If you are upgrading from v9.0 or earlier, you will need to add the following to your composer.json file:

    "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
    ]

    Make sure the previously used fxp/composer-asset-plugin is disabled in your composer.json file:

    "config": {
    "fxp-asset": {
      "enabled": false
    }
    }

    Then run composer update to install the new assets.

  • If you need to use JavaScript in any of your configuration options, 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 (Preferred Method) 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/npm/highcharts/.

  • You can access the JavaScript chart object from another script like this:

    var chart = $('#my-chart-id').highcharts();

    where my-chart-id is set via the top-level id configuration option. Just make sure you register your script after the widget declaration so that it has a chance to initialize.

  • The top-level 'callback' option allows you to initialize the chart after an AJAX request or other preprocessing. See included Highstock Widget Examples for usage.

Changelog

Yii2 Highcharts Changelog

v11.0 (2024-09-18)

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

v10.0.1 (2023-01-23)

  • Fixed issue #94 - invalid asset path

v10.0 (2023-01-22)

  • This release includes breaking changes. See Tips for upgrade instructions.
  • Upgraded Highcharts JS library to the latest major release (10.0).
  • Fix temporarily suppress notice on PHP82 #92

v9.0 (2021-03-04)

  • Upgraded Highcharts JS library to the latest major release (9.0).

v8.0 (2020-04-21)

  • Upgraded Highcharts JS library to the latest major release (8.0).
  • Updated docs for #77 HighchartsAsset::register($this)->withScripts(['highstock']); results with error 16

v7.1.2 (2019-08-07)

  • Upgraded Highcharts JS library to the latest release (7.1.2).
  • Added support for Gantt chart type (issue #74). See included Gantt Chart Example for usage.

v7.0 (2019-01-21)

  • Upgraded Highcharts JS library to the latest release (7.0.2).
  • Fixed issue #54.

v6.0 (2017-10-27)

  • Upgraded Highcharts JS library to the latest release (6.0.2).

v5.0.2 (2016-11-16)

  • Upgraded Highcharts JS library to the latest release (5.0.2).

v5.0.0 (2016-10-03)

  • Upgraded Highcharts JS library to the latest release (5.0.0).

v4.2.6 (2016-08-07)

  • Upgraded Highcharts JS library to the latest release (4.2.6).

v4.2.5 (2016-05-26)

  • Upgraded Highcharts JS library to the latest release (4.2.5).
  • Fixed #33: SeriesDataHelper does only return 20 datasets
  • Added travis.yml

v4.2.3 (2016-02-11)

  • Upgraded Highcharts JS library to the latest release (4.2.3).

v4.2.2 (2016-02-04)

  • Upgraded Highcharts JS library to the latest release (4.2.2).

v4.2.1 (2016-01-13)

  • Upgraded Highcharts JS library to the latest release (4.2.1).

v4.1.10 (2015-12-14)

  • Upgraded Highcharts JS library to the latest release (4.1.10).

v4.1.9 (2015-10-12)

  • Upgraded Highcharts JS library to the latest release (4.1.9).

v4.1.8 (2015-09-23)

  • Upgraded Highcharts JS library to the latest release (4.1.8).

v4.1.7 (2015-07-09)

  • Upgraded Highcharts JS library to the latest release (4.1.7).

v4.1.6 (2015-06-22)

  • Upgraded Highcharts JS library to the latest release (4.1.6).
  • Fixed issue #8.

v4.1.5 (2015-04-29)

  • Upgraded Highcharts JS library to the latest release (4.1.5).
  • Added SeriesDataHelper class to make preprocessing data easier. See included SeriesDataHelper Examples for usage.
  • Chart objects are no longer assigned to the generic chart variable on initialization. See Tips for info on accessing your charts from other scripts.

v4.0.4 (2014-09-25)

v4.0.1 (2014-04-24)

  • Upgraded Highcharts JS library to the latest release (4.0.1).

v3.0.10 (2014-03-17)

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

v3.0.9 (2014-02-17)

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

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



v11.0 is the latest of 27 releases



MIT license
Stats
166 github stars & 63 github forks
92 downloads in the last day
17573 downloads in the last 30 days
1222971 total downloads