Instalación de un Widget de Gráficos (FusionChart)

 1.- Adicionar en el composer:


"ptrnov/yii2-fusionchart": "*"


2.- Ejecutar en el cmd del proyecto:

composer update --prefer-dist


3.- Crear un archivo para la vista con nombre chart.php:


<?php

use ptrnov\fusionchart\ChartAsset;

/* @var $this yii\web\View */

/* @var $searchModel backend\modules\bookstore\models\Author\AuthorSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */


$this->title = Yii::t('app', 'Chart');

$this->params['breadcrumbs'][] = $this->title;

ChartAsset::register($this);

    


?>

<div class="row">

    <div class="col-sm-6">

        <div class="book-chart">

            <?=$chartBook?>

        </div>

    </div>

    <div class="col-sm-6">

        <div class="sale-chart">

        <?=$chartSale?>

        </div>

    </div>

</div>




4.- En el controlador adicionar:

use ptrnov\fusionchart\Chart;

5.- En el controlador crear el método a mostrar:

    public function actionChart()

    {


        $model =  Author::find()->all();     // your Model, example from class user

        $chartSale= Chart::Widget([

            'dataArray'=>$model,         //array scource model or manual array or sqlquery

            'dataField'=>['name','total_sale'],   //field['label','value'], normaly value is numeric

            'type'=>'column3d', 

            'renderid'=>'chartSale',            //unix name render

            'chartOption'=>[                

                    'caption'=> Yii::t('app', 'Authors'),     //Header Title

                    'subCaption'=>Yii::t('app', 'Sales'),    //Sub Title

                    'xaxisName'=>Yii::t('app', 'Authors'),   //Title Bawah/ posisi x

                    'yaxisName'=>Yii::t('app', 'Sales'),     //Title Samping/ y

                    'theme'=>'fusion',                       //Theme

                    'palettecolors'=> "#FCE7E6,#008ee4,#f8bd19,#e44a00,#6baa01,#ff2e2e",

                    'bgColor'=> "#ffffff",              //color Background 

                    'showBorder'=> "0",                 //border box outside

                    'showCanvasBorder'=> "0",           //border box inside 

            ],

        ]);



        $model =  Yii::$app->db->createCommand('

            SELECT name, count(author_book.id) as count 

            FROM author 

            LEFT JOIN author_book ON author_book.author_id = author.id 

            GROUP BY author.id')

            ->queryAll();               // your Model, example from class user

        $chartBook= Chart::Widget([

            'dataArray'=>$model,       //array scource model or manual array or sqlquery

            'dataField'=>['name','count'],  //field['label','value'] 

            'type'=>'pie3d', 

            'renderid'=>'chartContainer',               //unix name render

            'chartOption'=>[                

                    'caption'=>Yii::t('app', 'Authors'),          //Header Title

                    'subCaption'=>Yii::t('app', 'Books'),          //Sub Title

                    'xaxisName'=>Yii::t('app', 'Authors'),       //Title Bawah/ posisi x

                    'yaxisName'=>Yii::t('app', 'Books'),   //Title Samping/ y

                    'theme'=>'fusion',                    //Theme

                    'showlegend'=>"1",  

                    'legendposition'=> "bottom",                  //Theme

                    'palettecolors'=> "#FCE7E6,#008ee4,#f8bd19,#e44a00,#6baa01,#ff2e2e",

                    'bgColor'=> "#ffffff",       //color Background 

                    'showBorder'=> "0",     //border box outside

                    'showCanvasBorder'=> "0",           //border box inside 

            ],

        ]);



       

            

        return $this->render('chart',[

                'chartBook'=>$chartBook,

                'chartSale'=>$chartSale,

            ]);

    }

6.- Revisar la documentación:

https://github.com/ptrnov/yii2-fusionchart

https://www.fusioncharts.com/fusioncharts


Pueden ver el desarrollo en mi canal de YouTube:




Comentarios

  1. Buenas me da este error
    Invalid dataField, please check Column Name 'dataField'=>['wrongName','trueName']

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

AdminLTE3 integración Yii2

RBAC Yii2 utilizando la extensión "yii2mod/yii2-rbac": "*"

Integración AdminLTE2 Yii2