Implementación de Google Chart en Yii2 ("scotthuangzl/yii2-google-chart")

-

 1.- Colocar en el archivo de composer.json:

"scotthuangzl/yii2-google-chart": "dev-master"


2.- Ejecutar en el archivo de cmd:

 composer update --prefer-dist


3.- Colocar en el Controlador:

use scotthuangzl\googlechart\GoogleChart;


4.- En el controlador, en el método actionChart que se creó en una entrada anterior:

        $dataSale[]= [Yii::t('app', 'Authors'),Yii::t('app', 'Total Sales')];

        $modelArray =   Author::find()->orderBy('total_sale DESC')->limit(10)->all(); 


        foreach ($modelArray as $value) {

              $dataSale[] = [$value['name'],(double)$value['total_sale']];

        }   

        $chartGoogleSale =  GoogleChart::widget(

             array('visualization' => 'ColumnChart',

                'data' => $dataSale,

                'options' => array(

                  'title' => '',

                  'hAxis'=>[

                  'title'=> Yii::t('app', 'Authors')

                  ],

                 'legend'=> ['position'=>'top','alignment'=>'center'],

                 'vAxis'=>[

                  'title'=> Yii::t('app', 'Sales')

                  ],

                 'width'=>'100%',

                  'height'=>500,

                  'backgroundColor'=>[ 'fill'=>'transparent' ]

                  

                ))); 



        $data[]= [Yii::t('app', 'Authors'),Yii::t('app', 'Sales')];

        $modelArray =  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();  


        foreach ($modelArray as $value) {

              $data[] = [$value['name'],(int)$value['count']];

        }   

        $chartGoogleBook = GoogleChart::widget(

             array('visualization' => 'PieChart',

                'data' => $data,

                'options' => array(

                'title' => Yii::t('app', 'Total Libros'),

                 'legend'=> ['position'=>'left','alignment'=>'center'],

                  'width'=>'100%',

                  'height'=>500,

                  'backgroundColor'=>[ 'fill'=>'transparent' ],

                  'colors'=> ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],

                  'is3D'=> true

                  

                )));  



       

            

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

                'chartBook'=>$chartBook,

                'chartSale'=>$chartSale,

                'chartGoogleBook'=>$chartGoogleBook,

                'chartGoogleSale'=>$chartGoogleSale,

            ]);



5.- Colocar en la vista chart.php que creamos en una entrada anterior:

<div class="row">

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

        <div class="sale-chart">

            <?= $chartGoogleSale ?>

        </div>

    </div>

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

        <div class="book-chart">

            <?= $chartGoogleBook ?>

        </div>

    </div>

</div>



6.- Revisar la documentación:

https://developers.google.com/chart/interactive/docs/customizing_charts

https://www.yiiframework.com/extension/yii2-google-chart






Comentarios

Publicar un comentario

Entradas populares de este blog

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

-
Les muestro como hacer la configuración del módulo de RBAC en Yii2 utilizando una extensión que nos va a facilitar mucho la creación de los permisos y roles.  1.- Colocar en el composer.json      "yii2mod/yii2-rbac": "*" 2.- Ejecutar en el cmd de la carpeta del proyecto      composer update --prefer-dist  3.- Añadir en el common/config/main.php dentro de modules         'rbac' => [             'class' => 'yii2mod\rbac\Module',         ], 4.- En el common/config/main.php dentro de components:           'authManager' => [             'class' => 'yii\rbac\DbManager',             'defaultRoles' => ['guest', 'user'],         ],   5.-Ejecutar en el cmd de la carpeta del proyecto: php yii migrate/up --migrationPath=@yii/rbac/migrations ** Este código nos va a aña...
Leer más

AdminLTE3 integración Yii2

-
Imagen
 Aquí les muestro como hacer la integración con otro widget (extensión) que permite la integración con AdminLTE3: AdminLTE3 es una plantilla de administración, en una entrada anterior les mostré como instalar el AdminLTE2, esta es una versión superior, utiliza Bootstrap4, lo cual está muy bueno, pero hay que tener en cuenta que una que otra extensión nos puede fallar si no está con Bootstrap4. También los css tienen uno que otro cambio, entonces si vemos que el sistema se comporta con tamaños de fuentes diferentes probablemente sea alguna incompatibilidad. Importante revisar la documentación de Bootstrap 4 para que no nos coja de sorpresa, sobre todo si queremos migrar:  https://getbootstrap.com/docs/4.4/getting-started/introduction/ 1.- Explorar la plantilla de adminlte3 para ver todo lo que tiene que ofrecer: https://adminlte.io/themes/v3/index3.html Vamos a ver que el AdminLTE3 varía bastante en cuanto a la versión 2, los bordes más redondeados, una gama de colores mucho ma...
Leer más

Internacionalización Yii2

-
Imagen
Crear una aplicación en la que podamos manejar múltiples lenguajes es fundamental en la época actual, y con esta variante que les explico como vamos a lograr este objetivo. Pasos para configurar el idioma de nuestro proyecto de Yii2:  Colocar en el frontend/config/main.php:                    'language' => 'es',             'sourceLanguage' => 'en',     Esto se define por aplicación, o sea si estamos trabajando en el backend debemos colocarlo también en el main del backend.  El primer elemento se refiere al lenguaje en el que vas a estar mostrando la aplicación, y el segundo es el lenguaje en el que se encuentra escrito el código, es recomendable mantenerlo en inglés pues es un lenguaje que maneja la mayoría, por lo tanto a futuro si otra persona tiene que darle mantenimiento a nuestro código lo pueda entender incluso si no es de nuestro país. Colocar en el frontend/confi...
Leer más