Gráficas con Laravel y Chartjs utilizando Laravel Mix

En esta entrada vamos a ver cómo generar gráficas con Laravel y Chartjs paso a paso, la idea, además de generar este tipo de gráficas, es ver cómo podemos sacarle partido a Laravel Mix para trabajar con ES6, pero no sólo eso, también aprenderemos a generar intervalos de fechas de forma correcta utilizando periodos y fechas Carbon con localización.

 

 Ahora que ya sabemos más o menos qué vamos a generar, ¡podemos comenzar!

Preparando Laravel para utilizar Laravel Mix

Lo primero que necesitas es utilizar el layout que Laravel ofrece por defecto al ejecutar el comando php artisan make:auth, así que no si no lo has hecho, hazlo ahora. No es un requisito pero queremos utilizar el archivo app.js y en ese layout ya viene todo preparado...

Ahora vamos a instalar las dependencias de JavaScript en nuestro proyecto utilizando el comando npm install para a continuación abrir el archivo webpack.mix.js y añadir la siguiente línea al final del mismo.

mix.js('public/js/chartjs/LineChart.js', 'public/js/chartjs.line_chart.js');

Con esa instrucción le decimos a Laravel Mix que queremos que vaya a buscar el archivo public/js/chartjs/LineChart.js y que haga de ese código algo que los navegadores entiendan y finalmente ponga ese código en el archivo public/js/chartjs.line_chart.js.

Ya sabemos que Laravel Mix revisa todo lo que ocurre en nuestro archivo resources/js/app.js y lo pasa al directorio public/js, pero en este caso a mi me gusta más hacerlo así, siéntete libre de hacerlo como prefieras.

Para que nuestro código JavaScritp quede funcionando y compilando en cada cambio ejecuta en el terminal el comando npm run watch, con eso podemos seguir.

Generando una clase para representar la gráfica

Ahora vamos a crear el archivo public/js/chartjs/LineChart.js y añadimos el siguiente código.

class LineChart {
    constructor () {
        this.init()
    }

    init () {
        this.lineChart()
    }

    lineChart () {
        $.ajax({
            url: '/line-chart',
            method: 'GET',
            success: function (response) {
                const data = {
                    type: 'line',
                    data: {
                        labels: response.months,
                        datasets: [{
                            label: 'Beneficios',
                            backgroundColor: Looper.colors.brand.purple,
                            borderColor: Looper.colors.brand.purple,
                            data: response.data,
                            fill: false,
                        }]
                    },
                    options: {
                        title: {
                            display: true,
                            text: 'Beneficios'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                label: function(tooltipItem, data) {
                                    let label = `Beneficios: ${data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '0'}`;
                                    if (label) {
                                        label += '€';
                                    }
                                    return label;
                                }
                            }
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                ticks: {
                                    maxRotation: 0,
                                    maxTicksLimit: 5
                                }
                            }]
                        }
                    }
                };

                // init chart line
                const canvas = $('#canvas-line-chart')[0].getContext('2d')
                new Chart(canvas, data)
            }
        })
    }
}

$(document).ready(() => {
    new LineChart()
});

Definir la lógica para retornar los datos con Laravel

<?php

public function lineChart () {
    if (request()->ajax()) {
        $from = session()->has('from') ? session('from') : (new Carbon('first day of January ' . date('Y')))->toDateTimeString();
        $to = session()->has('to') ? session('to') : now()->toDateTimeString();

        $period = CarbonPeriod::create($from, $to);
        $range = [];
        $dbData = [];
        $months = [];
        foreach($period as $date){
            $range[$date->format('Y-m')] = 0;
            $months[$date->format('Y-m')] = $date->formatLocalized('%Y %B');
        }

        $lineCharts = LineChart::select(DB::raw('SUM(amount) as totalAmount'), DB::raw('DATE_FORMAT(`created_at`,\'%Y-%m\') as monthYear'));

        if (session('from')) {
            $lineCharts->where('created_at', '>=', (new Carbon(session('from')))->toDateTimeString());
        }
        if (session('to')) {
            $lineCharts->where('created_at', '<=', (new Carbon(session('to')))->toDateTimeString());
        }

        $lineCharts = $lineCharts->groupby('monthYear')->get();

        if ($lineCharts) {
            foreach($lineCharts as $lineChart){
                $dbData["{$lineChart->monthYear}"] = $lineChart->totalAmount;
            }
        }
        $data = array_replace($range, $dbData);
        return response()->json(['data' => array_values($data), 'months' => array_values($months)]);
    }
}

Con ese método en un controlador tenemos suficiente para generar datos basados en periodos entre 2 fechas, aunque faltaría definir las sesiones from y to, eso no debe ser un problema a estas alturas.

Lo único que te quedaría sería definir un archivo blade.php con un código similar al siguiente:

@extends('layouts.app')

@section('content')
    <div class="row">
       <canvas id="canvas-line-chart" class="chartjs chartjs-render-monitor" style="display: block; height: 250px; width: 783px;" height="200"></canvas>
    </div>       
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
    <script src="/js/chartjs.line_chart.js"></script>
@endpush

Eso es todo, un canvas con el id correcto para que Chartjs sepa donde cargar la gráfica que acabamos de generar.