neoacevedo/yii2-chartjs-widget

neoacevedo/yii2-chartjs-widget ChartJs widget for Yii2.

ChartJs Widget ¶

Installation
Usage
Further Information
Contributing
Credits
License

Este paquete es un fork de 2amigos/yii2-chartjs-widget, el cual se encuentra en modo de solo lectura. Este fork fue creado para mantener vivo el paquete y continuar su mantenimiento.

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 neoacevedo/yii2-chartjs-widget:dev-main

or add

"neoacevedo/yii2-chartjs-widget" : "dev-main"

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

Usage ¶

The following types are supported:

Line
Bar
Radar
Polar
Pie
Doughnut
Bubble
Scatter
Area
Mixed

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
    ],
    'data' => [
        'labels' => ["January", "February", "March", "April", "May", "June", "July"],
        '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]
            ]
        ]
    ]
]);
?>

Plugins usage example (displaying percentages on the Pie Chart): ` echo ChartJs::widget([

'type' => 'pie',
'id' => 'structurePie',
'options' => [
    'height' => 200,
    'width' => 400,
],
'data' => [
    'radius' =>  "90%",
    'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels
    'datasets' => [
        [
            'data' => ['35.6', '17.5', '46.9'], // Your dataset
            'label' => '',
            'backgroundColor' => [
                    '#ADC3FF',
                    '#FF9A9A',
                'rgba(190, 124, 145, 0.8)'
            ],
            'borderColor' =>  [
                    '#fff',
                    '#fff',
                    '#fff'
            ],
            'borderWidth' => 1,
            'hoverBorderColor'=>["#999","#999","#999"],                
        ]
    ]
],
'clientOptions' => [
    'legend' => [
        'display' => false,
        'position' => 'bottom',
        'labels' => [
            'fontSize' => 14,
            'fontColor' => "#425062",
        ]
    ],
    'tooltips' => [
        'enabled' => true,
        'intersect' => true
    ],
    'hover' => [
        'mode' => false
    ],
    'maintainAspectRatio' => false,

],
'plugins' =>
    new \yii\web\JsExpression('
    [{
        afterDatasetsDraw: function(chart, easing) {
            var ctx = chart.ctx;
            chart.data.datasets.forEach(function (dataset, i) {
                var meta = chart.getDatasetMeta(i);
                if (!meta.hidden) {
                    meta.data.forEach(function(element, index) {
                        // Draw the text in black, with the specified font
                        ctx.fillStyle = 'rgb(0, 0, 0)';

                        var fontSize = 16;
                        var fontStyle = 'normal';
                        var fontFamily = 'Helvetica';
                        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                        // Just naively convert to string for now
                        var dataString = dataset.data[index].toString()+'%';

                        // Make sure alignment settings are correct
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        var padding = 5;
                        var position = element.tooltipPosition();
                        ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                    });
                }
            });
        }
    }]')