Ejemplos de Gráficas con Highcharts

Ejemplos de Gráficas con Highcharts

Ejemplos de gráficas utilizando la exención de Yii2 Highcharts.

Un día en búsqueda de documentación para gráficas no encontré ningún sitio dónde encontrar ejemplos de cómo utilizar gráficas que si bien en la página de la documentación está para JS pero no para código Yii2.

Por esta razón les dejaré éste tutorial donde explica el uso de algunas gráfica.

Antes de poder utilizar éste componente debe de asegurarse de tener instalado el componente. 

Instalación de componente Highcharts

La opción para instalarlo via composer es la siguiente.

php composer.phar require --prefer-dist miloschuman/yii2-highcharts-widget "*"

o si lo prefieres modificando el "composer.json" agregando ésta línea

"miloschuman/yii2-highcharts-widget": "*"

Una vez que está instalado y para verificar que esté funcionando puedes agregar la siguiente línea en la vista. 

use miloschuman\highcharts\Highcharts;

Ejemplo de gráfica de Pay con leyendas

Código de ejemplo de gráfica de pay.

use miloschuman\highcharts\Highcharts;

$data = [
            ['Twitter', 80],
            ['Videos', 10],
            ['Web', 5],
            ['Web', 5],
        ];

echo 
 Highcharts::widget([
    'scripts' => [
        'highcharts-pie',
    ],
    'options' => [
        'credits' => ['enabled' => false],
        'chart' => ['type' => 'pie'
        ],
        'plotOptions' => [ // it is important here is code for change depth and use pie as donut
            'pie' => [
                'allowPointSelect' => true,
                'cursor' => 'pointer',
                'innerSize' => 100,
                'depth' => 45,
                'showInLegend' => true
            ]
        ],

        'title' => ['text' => 'Titulo de Gráfica'],
        'series' => [[
            'type' => 'pie',
            'name' => 'Menciones',
            'data' => $data,

            ]],
    ]

]);

Ejemplo de gráfica de barras con leyendas

use miloschuman\highcharts\Highcharts;

$tituloGrafica1 = "Clicks por departamento";

$clickByDeptoChart[] = [ 'name' => 'Sistemas', 'y' => 1];
$clickByDeptoChart[] = [ 'name' => 'Soporte', 'y' => 4];

$clickByDeptoChart[] = [ 'name' => 'Administracion', 'y' => 6];

echo

Highcharts::widget([
                                'scripts' => ['modules'],
                                'options' => [
                                    'chart' => ['type' => 'column'],
                                    'title' => ['text' => $tituloGrafica1],
                                    'xAxis' => ['type' => 'category'],
                                    'yAxis' => ['title' => ['text' => 'click por departamento']],
                                    'series' => [
                                        [
                                           'name' => 'Dio Click',
                                           'colorByPoint' => true,
                                           'data' => $clickByDeptoChart
                                        ],
                                    ],
                                ]
                            ]);

Donde a estructura de los datos debe ser el siguiente de acuerdo al ejemplo, si hacemos un var_dump($clicksPorDepartamento) esto es lo que nos mostraria:

Array
(
    [0] => Array
        (
            [name] => Sistemas
            [y] => 1
        )

    [1] => Array
        (
            [name] => Soporte Técnico
            [y] => 2
        )

    [2] => Array
        (
            [name] => Administración
            [y] => 1
        )

)

Ejemplo de gráfica de líneas

                            Highcharts::widget(
                                    [
                                        'scripts' => ['modules'],
                                        'options' => [
                                            'title' => ['text' => 'Evolución General'],
                                            'subtitle' => ['text' => 'Anual'],
                                            'yAxis' => [
                                                'title' => ['text' => 'Clicks']
                                            ],
                                            'xAxis' => ['categories' => ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto']],
                                            'legend' => ['layout' => 'vertical', 'align' => 'right', 'verticalAlign' => 'middle'],
                                            'series' => [
                                                ['name' => 'Sistemas', 'data' => [1, 2, 3, 4, 5, 6, 7, 8]],
                                                ['name' => 'Soporte técnico', 'data' => [2, 3, 4, 5, 6, 7, 8, 9]],
                                                ['name' => 'Otros', 'data' => [4, 8, 7, 4, 6, 9, 10, 8]],
                                            ]
                                        ]
                                    ]
                            );

Fuentes:

Instalación: https://www.yiiframework.com/extension/yii2-highcharts-widget

Documentación: https://www.highcharts.com/demo/
Github: https://github.com/miloschuman/yii2-highcharts