2017 © Pedro Peláez
 

yii2-extension yii2-chartjs-widget

ChartJs widget for Yii2.

image

2amigos/yii2-chartjs-widget

ChartJs widget for Yii2.

  • Wednesday, May 2, 2018
  • by tonydspaniard
  • Repository
  • 25 Watchers
  • 75 Stars
  • 114,140 Installations
  • PHP
  • 17 Dependents
  • 0 Suggesters
  • 41 Forks
  • 7 Open issues
  • 10 Versions
  • 10 % Grown

The README.md

ChartJs Widget

Latest Version Software License Build Status Coverage Status Quality Score Total Downloads StyleCI, (*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
  • 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., (*8)

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):, (*9)

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);
                        });
                    }
                });
            }
        }]')
])

Further Information

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

Contributing

Please see CONTRIBUTING for details., (*11)

Credits

License

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

2amigOS!
Custom Software | Web & Mobile Software Development
www.2amigos.us, (*13)

The Versions

02/05 2018

dev-master

9999999-dev http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

26/07 2017

2.1.2

2.1.2.0 http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

26/07 2017

dev-analysis-zdebPb

dev-analysis-zdebPb http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

26/07 2017

2.1.1

2.1.1.0 http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

26/07 2017

2.1.0

2.1.0.0 http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

11/06 2017

2.0.2

2.0.2.0 http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

09/07 2016

2.0.1

2.0.1.0 http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

18/03 2015

2.0.0

2.0.0.0 http://yiiwheels.com/extension/chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

The Development Requires

by 2amigOS! Consulting Group

extension yii2 2amigos yii yii 2 widget chartjs

03/02 2015

1.0.0

1.0.0.0 https://github.com/2amigos/yii2-chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

by Antonio Ramirez

extension yii widget chartjs

04/02 2014

0.1.0

0.1.0.0 https://github.com/2amigos/yii2-chartjs-widget

ChartJs widget for Yii2.

  Sources   Download

BSD-3-Clause

The Requires

 

by Antonio Ramirez

extension yii widget chartjs