Google Charts the Yii Way
yii2-gcharts demo
This is a demonstration of a few Yii 2.0 classes rendering a selection of Google Charts.
ColumnChart
Code
<?php use sjaakp\gcharts\ColumnChart; $dataProvider = new ActiveDataProvider([ 'query' => Eu::find()->orderBy(['gdp' => SORT_DESC]), 'pagination' => false ]); ?> ... <?= ColumnChart::widget([ 'height' => '400px', 'dataProvider' => $dataProvider, 'columns' => [ 'code:string', // first column: domain 'gdp', // second column: data [ // third column: tooltip 'value' => function($model, $a, $i, $w) { return "$model->name\nGDP: $ $model->gdp"; }, 'type' => 'string', 'role' => 'tooltip', ], ], 'options' => [ 'title' => 'EU: Gross Domestic Product per Capita', ], ]) ?> ...
PieChart
Code
<?php use sjaakp\gcharts\PieChart; $dataProvider = new ActiveDataProvider([ 'query' => Eu::find()->orderBy(['population' => SORT_DESC]), 'pagination' => false ]); ?> ... <?= PieChart::widget([ 'height' => '400px', 'dataProvider' => $dataProvider, 'columns' => [ 'columns' => [ 'name:string', // first column: domain 'population' // second column: data ], ], 'options' => [ 'title' => 'EU Population', 'sliceVisibilityThreshold' => 0.022 ], ]) ?> ...
GeoChart
Code
<?php use sjaakp\gcharts\GeoChart; $dataProvider = new ActiveDataProvider([ 'query' => Eu::find(), 'pagination' => false ]); ?> ... <?= GeoChart::widget([ 'height' => '400px', 'dataProvider' => $dataProvider, 'columns' => [ 'columns' => [ 'name:string', // first column: domain 'gini' // second column: data ], ], 'options' => [ 'region' => '150', // Europe // notice that GeoChart doesn't have a title option ], ]) ?> ...
ScatterChart
Code
<?php use sjaakp\gcharts\ScatterChart; $dataProvider = new ActiveDataProvider([ 'query' => Eu::find(), 'pagination' => false ]); ?> ... <?= ScatterChart::widget([ 'height' => '400px', 'dataProvider' => $dataProvider, 'columns' => [ 'columns' => [ 'gdp', // first column, data X values 'hdi', // second column, data Y values [ // third column, tooltips 'value' => function($model, $a, $i, $w) { return "$model->name\nGDP: $ $model->gdp -- HDI: $model->hdi"; }, 'type' => 'string', 'role' => 'tooltip', ], ], ], 'options' => [ 'title' => "EU: Gross Domestic Product per Capita\nvs Human Development Index", 'hAxis' => [ 'title' => 'GDP' ], 'vAxis' => [ 'title' => 'HDI' ], ], ]) ?> ...
Other charts available are AreaChart, BarChart, BubbleChart, LineChart. There may be more in the future.
Data
Total 28 items.
Name | Population | Area (km2) | GDP (dollars) | Gini (inequality) | HDI (human development) |
---|---|---|---|---|---|
Austria | 8511000 | 83855 | 47031 | 29.1 | 0.895 |
Belgium | 11203992 | 30528 | 43800 | 33.0 | 0.897 |
Bulgaria | 7245677 | 110994 | 18326 | 29.2 | 0.782 |
Croatia | 4246809 | 56594 | 21169 | 29.0 | 0.805 |
Cyprus | 858000 | 9251 | 30769 | 31.2 | 0.848 |
Czech Republic | 10398697 | 78866 | 30895 | 25.8 | 0.873 |
Denmark | 5621607 | 43075 | 45451 | 24.7 | 0.901 |
Estonia | 1315819 | 45227 | 27994 | 36.0 | 0.846 |
Finland | 5451270 | 338424 | 40838 | 26.9 | 0.892 |
France | 66076909 | 674843 | 41018 | 32.7 | 0.893 |
Germany | 80704691 | 357021 | 46895 | 28.3 | 0.920 |
Greece | 10992783 | 131990 | 26773 | 34.3 | 0.860 |
Hungary | 9877365 | 93030 | 25895 | 30.0 | 0.831 |
Ireland | 4604029 | 70273 | 51118 | 34.3 | 0.916 |
Italy | 61152798 | 301338 | 35811 | 36.0 | 0.881 |
Latvia | 2001468 | 64589 | 24540 | 35.7 | 0.814 |
Lithuania | 2943472 | 65200 | 28210 | 35.8 | 0.818 |
Luxembourg | 549680 | 2586 | 93173 | 30.8 | 0.875 |
Malta | 425384 | 316 | 34544 | 25.8 | 0.847 |
Netherlands | 17082000 | 41543 | 48317 | 30.9 | 0.921 |
Poland | 38018000 | 312685 | 26210 | 34.9 | 0.821 |
Portugal | 10427301 | 92390 | 27624 | 38.5 | 0.816 |
Romania | 19942642 | 238391 | 20526 | 31.5 | 0.786 |
Slovakia | 5400598 | 49035 | 29209 | 25.8 | 0.840 |
Slovenia | 2061085 | 20273 | 30508 | 31.2 | 0.892 |
Spain | 46507760 | 504030 | 34899 | 32.0 | 0.885 |
Sweden | 9644864 | 449964 | 47228 | 25.0 | 0.916 |
United Kingdom | 64596800 | 243610 | 40676 | 36.0 | 0.875 |
(These data are from October, 2015. They were taken from Wikipedia.)