Generacion De Gráficas(Charts) En Laravel 5.*

Si bien Laravel nos proporciona todas las herramientas necesarias para desarrollar ya sea aplicaciones pequeñas o grandes, Proporcionando facilidades al desarrollador, en algun momento dicha aplicación requiere la inclusion de graficas ya sea para visualizar valores estadisticos o simplemente para poder representar valores de forma mas atractiva o sencila, y es ahi donde se nos presenta una pequeña barrera y es aun mas complicado si se nos dificulta el el uso de javascript. Por asi decir, ya que la mayoria de las librerías que permiten la generacion de graficas estan basadas en javascript, como ser Hightcharts, Chart.js, Google Chart Tools, fusion charts, Chartist, Morris.js, Plottable JS, etc. asi podemos listar una serie de librerias que cumplen dicho proposito. Es evidente que tenemos una gama enorme y diferentes alternativas para implementarlas en nuestras aplicaciones laravel, ya anteriormente lo habia mencionado que el grado de dificultad se complica un poco mas si javascript es nuestro punto debil(si fuera el caso). Es ahi cuando entra en juego los famosos packages de Laravel, si estas en lo correcto! alguien ya se encargo de proporcionarnos las facilidad para realizar esta tediosa tarea, para realizar la instalacion de este package haremos uso de composer:

composer require consoletvs/charts

Agregar los ServicesProvider en config/app.php

ConsoleTVs\Charts\ChartsServiceProvider::class,

Agregar el alias en el array de aliases en config/app.php

'Charts' => ConsoleTVs\Charts\Charts::class,

Ejecutamos los siguientes comandos con artisan para publicar el config y los assets de la libreria

php artisan vendor:publish --tag=charts_config
php artisan vendor:publish --tag=charts_assets --force

Tras ejecutar los anteriores comandos podemos visualizar el archivo de configuracion por defecto en config/charts.php Ya tenemos instalado el package comencemos con un ejemplo basico.

El controlador

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use Charts;

class TestController extends Controller
{
    public function index()
    {
        $chart = Charts::new('pie', 'highcharts')
            ->setTitle('My nice chart')
            ->setLabels(['First', 'Second', 'Third'])
            ->setValues([5,10,20])
            ->setDimensions(1000,500)
            ->setResponsive(false);

        return view('test', ['chart' => $chart]);
    }
}

La vista:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My Charts</title>

        {!! Charts::assets() !!}

    </head>
    <body>
        <center>
            {!! $chart->render() !!}
        </center>
    </body>
</html>

El Resultado del anterior ejemplo es el siguiente: Resultado de ejemplo anterior

Donde

{!! Charts::assets() !!}

Agrega todas las dependencias javascript necesarias para generar dicho gráfico

{!! $chart->render() !!}

Esta opcion agregala donde quieres que se genere o renderise el grafico correspondiente. La forma de uso de esta libreria es de la siguiete forma:

Charts:new('tipo_grafico', 'libreria')
setTitle('tutle'), Titulo del grafico
setLabels(array()). array de nombres de etiqueta
setValues(array()), array de valores
setDimensions(width, height), Proporciones de grafica
setResponsive(boolean), Opcion de grafica responsivo(se acomoda al espacio proporcionado)

Los tipos y librerias que nos ofrece el paquete son:

Librerias
ChartJS - chartjs
Hightcharts - hightcharts
Google Charts Tools - google
Google Material - material
Chartist - chartist
Fusion Charts - funsioncharts
Morris JS - morris
Plottable JS - plottablejs
Minimalist - minimalist
Canvas Gauge - canvas-gauges
JustGage - justgage
Progressbar JS - progressbarjs

Tipos de graficos se tienen muchos como ejemplo solo veremos los de hightchartJS

Area Chart - area Realtime Available
Line Chart - line Realtime Available
Bar Chart - bar Realtime Available
Pie Chart - pie
Donut / Doughnut Chart - donut
Geo Chart - geo

Ademas de proporcionar la opcion de generacion de graficos desde la base de datos ya sea agrupando por columnas, por año, mes y dia y otras opciones mas. En un siguiente articulo veremos la forma de agregar una nueva libreria y un nuevo grafico a este package. Para mas informacion revisa el repositorio de este package aqui.

Escribe tu comentario