Google Charts the Yii Way
yii2-gcharts demo

<?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',
],
]) ?>
...

<?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
    ],
]) ?>
    ...

<?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
    ],
]) ?>
    ...

<?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' ],
    ],
]) ?>
    ...