Easily add Highcharts, Highstock and Highmaps graphs to your Yii2 application., (*1)
, (*2)
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., (*3)
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., (*4)
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!, (*5)
Installation
The preferred way to install this extension is through composer., (*6)
Either run, (*7)
php composer.phar require --prefer-dist skeeks/yii2-widget-highcharts "dev-master"
or add, (*8)
"skeeks/yii2-widget-highcharts": "dev-master"
to the require section of your composer.json file., (*9)
Usage
Preferred Method (using PHP arrays)
To use this widget, insert the following code into a view file:, (*10)
use skeeks\widget\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., (*11)
See /doc/examples for more usage examples., (*12)
Alternative Method (using JSON string)
Alternatively, you can use a valid JSON string in place of an associative array to specify options:, (*13)
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., (*14)
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:, (*15)
use skeeks\widget\highcharts\HighchartsAsset;
HighchartsAsset::register($this)->withScripts(['highstock', '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., (*16)
Tips
-
If you need to use JavaScript in any of your configuration options, use Yii's [[JsExpression]] object. For instance:, (*17)
...
'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., (*18)
-
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., (*19)
...
'credits' => ['enabled' => false],
...
-
All adapters, modules, themes, and supplementary chart types must be enabled through the top-level 'scripts' option., (*20)
...
'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/skeeks/yii2-widget-highcharts/assets/., (*21)
Web development has never been so fun!
www.skeeks.com, (*22)
Wallogit.com
