musingsz/yii2-chartjs-widget

ChartJs widget for Yii2.

0.4 2017-03-16 10:53 UTC

Requires

• bower/chartjs: 2.1.6
• yiisoft/yii2: *

Requires (Dev)

• phpunit/phpunit: 4.*

BSD-3-Clause

• 2amigOS! Consulting Group

• extension
• yii
• widget
• yii2
• chartjs
• yii 2
• 2amigos

README

Renders a ChartJs plugin widget

Installation

The preferred way to install this extension is through composer. This requires the composer-asset-plugin, which is also a dependency for yii2 – so if you have yii2 installed, you are most likely already set.

Either run

composer require 2amigos/yii2-chartjs-widget:~2.0

or add

"2amigos/yii2-chartjs-widget" : "~2.0"

to the require section of your application's composer.json file.

Usage

The following types are supported:

• Line
• Bar
• Radar
• Polar
• Pie
• Doughnut

The following example is using the Line type of chart. Please, check ChartJs plugin documentation for the different types supported by the plugin.

use dosamigos\chartjs\ChartJs;

<?= ChartJs::widget([
    'type' => 'line',
    'options' => [
        'height' => 400,
        'width' => 400
    ],
    datasets =>
    [
        [
            'label' => "My First dataset",
            'backgroundColor' => "rgba(179,181,198,0.2)",
            'borderColor' => "rgba(179,181,198,1)",
            'pointBackgroundColor' => "rgba(179,181,198,1)",
            'pointBorderColor' => "#fff",
            'pointHoverBackgroundColor' => "#fff",
            'pointHoverBorderColor' => "rgba(179,181,198,1)",
            'data' => [65, 59, 90, 81, 56, 55, 40]
        ],
        [
            'label' => "My Second dataset",
            'backgroundColor' => "rgba(255,99,132,0.2)",
            'borderColor' => "rgba(255,99,132,1)",
            'pointBackgroundColor' => "rgba(255,99,132,1)",
            'pointBorderColor' => "#fff",
            'pointHoverBackgroundColor' => "#fff",
            'pointHoverBorderColor' => "rgba(255,99,132,1)",
            'data' => [28, 48, 40, 19, 96, 27, 100]
        ]
    ]
]);
?>

Further Information

ChartJs has lots of configuration options. For further information, please check the ChartJs plugin website.

Contributing

Please see CONTRIBUTING for details.

Credits

• Antonio Ramirez
• All Contributors

License

The BSD License (BSD). Please see License File for more information.

Web development has never been so fun!
www.2amigos.us