yii2-extension yii2-chartjs-widget {🖫 20, ⚐ 7, ★ 0}

onixsib/yii2-chartjs-widget

ChartJs widget for Yii2.

Wednesday, March 29, 2017
by onixsib
Repository
1 Watchers
0 Stars
20 Installations

PHP
0 Dependents
0 Suggesters
42 Forks
0 Open issues
7 Versions
0 % Grown

The README.md

, _(*1)

Renders a ChartJs plugin widget, _(*2)

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., _(*3)

Either run, _(*4)

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

or add, _(*5)

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

to the require section of your application's composer.json file., _(*6)

Usage

The following types are supported:, _(*7)

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., _(*8)

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]
        ]
    ]
]);
?>