| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/11585/cwd/html/ppaobm/vendor/miloschuman/yii2-highcharts-widget/doc/examples/ |
Upload File : |
# Yii2 Highmaps Widget Examples #
## Basic Example ##
This is a basic map example using the free [Highcharts Map Collection](http://www.highcharts.com/docs/maps/map-collection)
data. Add the following code to any view file.
```php
use miloschuman\highcharts\Highmaps;
use yii\web\JsExpression;
// To use Highcharts Map Collection, we must register those files separately.
// The 'depends' option ensures that the main Highmaps script gets loaded first.
$this->registerJsFile('http://code.highcharts.com/mapdata/countries/de/de-all.js', [
'depends' => 'miloschuman\highcharts\HighchartsAsset'
]);
echo Highmaps::widget([
'options' => [
'title' => [
'text' => 'Highmaps basic demo',
],
'mapNavigation' => [
'enabled' => true,
'buttonOptions' => [
'verticalAlign' => 'bottom',
]
],
'colorAxis' => [
'min' => 0,
],
'series' => [
[
'data' => [
['hc-key' => 'de-ni', 'value' => 0],
['hc-key' => 'de-hb', 'value' => 1],
['hc-key' => 'de-sh', 'value' => 2],
['hc-key' => 'de-be', 'value' => 3],
['hc-key' => 'de-mv', 'value' => 4],
['hc-key' => 'de-hh', 'value' => 5],
['hc-key' => 'de-rp', 'value' => 6],
['hc-key' => 'de-sl', 'value' => 7],
['hc-key' => 'de-by', 'value' => 8],
['hc-key' => 'de-th', 'value' => 9],
['hc-key' => 'de-st', 'value' => 10],
['hc-key' => 'de-sn', 'value' => 11],
['hc-key' => 'de-br', 'value' => 12],
['hc-key' => 'de-nw', 'value' => 13],
['hc-key' => 'de-bw', 'value' => 14],
['hc-key' => 'de-he', 'value' => 15],
],
'mapData' => new JsExpression('Highcharts.maps["countries/de/de-all"]'),
'joinBy' => 'hc-key',
'name' => 'Random data',
'states' => [
'hover' => [
'color' => '#BADA55',
]
],
'dataLabels' => [
'enabled' => true,
'format' => '{point.name}',
]
]
]
]
]);
```