Usare Chart.js in Laravel 11

di
Chart.js Laravel

Oggi vedremo come usare Chart.js in Laravel 11 utilizzando un progetto già avviato.

Chart.js è una libreria JavaScript open source pensata per creare grafici dinamici e responsive all’interno di pagine web. Utilizzando l’elemento HTML5 <canvas>, permette di visualizzare i dati in modo chiaro e accattivante, senza richiedere plugin esterni. Tra i grafici supportati troviamo linee, barre, torte, radar, scatter e altri, tutti altamente personalizzabili nei colori, etichette, tooltip e animazioni. È ideale per dashboard, report interattivi e qualsiasi contesto in cui la presentazione visiva dei dati sia importante.

Uno dei punti di forza di Chart.js è la sua estrema semplicità: basta includere la libreria e definire poche righe di configurazione per ottenere un grafico completo e responsive, perfettamente adattabile a qualsiasi dispositivo. Inoltre, si integra facilmente con framework moderni come React, Vue o Angular, ed è disponibile con licenza MIT, quindi può essere utilizzata liberamente anche in progetti commerciali. Chart.js è la soluzione perfetta per chi cerca un modo veloce ed efficace per trasformare dati grezzi in visualizzazioni intuitive.

Laravel è un framework PHP open source tra i più utilizzati al mondo per lo sviluppo di applicazioni web moderne. Basato sull’architettura MVC (Model-View-Controller), Laravel offre una sintassi elegante e leggibile, pensata per rendere lo sviluppo più semplice e produttivo. Include funzionalità avanzate come routing, gestione delle sessioni, autenticazione, validazione, migrazioni per il database e molto altro, tutto integrato in modo coerente e modulare. Laravel è particolarmente apprezzato per l’uso del suo potente ORM chiamato Eloquent, che permette di interagire con il database in modo fluido e intuitivo.

Uno dei grandi vantaggi di Laravel è la sua attenzione allo sviluppatore: la documentazione è chiara, la community è ampia e attiva, e l’ecosistema è ricco di strumenti utili, come Laravel Breeze e Jetstream per l’autenticazione, Laravel Horizon per le code di lavoro e Laravel Nova per la gestione del backend. Inoltre, grazie al supporto nativo per API REST e a strumenti moderni come Laravel Sanctum o Laravel Livewire, il framework si adatta perfettamente sia allo sviluppo classico che a quello full-stack. In sintesi, Laravel è una scelta solida e scalabile per chi vuole costruire applicazioni robuste, sicure e manutenibili in tempi rapidi.

  1. Prerequisiti
  2. Installare Chart.js
  3. Configurazione controller
  4. Configurazione route
  5. Configurazione view

Prerequisiti

I prerequisiti per seguire questa guida, sono i seguenti:

  1. Avere composer installato ( esempio di guida all’installazione di composer )
  2. Avere php 8.2 installato
  3. Avere npm installato
  4. Avere un progetto Laravel 11 già avviato
  5. Il progetto Laravel deve avere una connessione con un database
  6. Sono necessari modelli e controller
  7. Il progetto laravel deve usare Vite

Se i prerequisiti sono soddisfatti, possiamo passare al prossimo step, l’installazione di Chart.js.

Installare Chart.js

L’installazione di Chart.js in un progetto Laravel 11 si divide in più parti. Infatti, sarà necessario sia installare il pacchetto tramite npm ma anche tramite composer. 

Quando si sviluppa un’applicazione con Laravel, è normale utilizzare due gestori di pacchetti: Composer per le dipendenze PHP (backend) e npm per le librerie JavaScript (frontend). In questo contesto, se desideri utilizzare Chart.js per creare grafici dinamici nel browser, è fondamentale installarlo tramite npm, perché Chart.js è una libreria JavaScript pensata per il lato client.

Composer viene usato solo per pacchetti PHP, quindi non serve e non può installare Chart.js. La confusione nasce quando si lavora in progetti fullstack Laravel, dove Composer e npm convivono nello stesso ambiente ma hanno ruoli ben distinti. In breve: npm serve per Chart.js, Composer per Laravel e le sue estensioni PHP. Entrambi sono essenziali, ma agiscono su piani diversi dello stack tecnologico.

Spostiamoci nella root del nostro progetto Laravel ed apriamo il terminale:

composer require icehouse-ventures/laravel-chartjs
php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --tag="config"
npm install chart.js

Abbiamo dunque installato Chart.js via npm e laravel-chartjs tramite composer. A questo punto bisogna attivare nel nostro progetto Vite. Apriamo resources/js/app.js e aggiungiamo: 

import Chart from 'chart.js/auto';
window.Chart = Chart;

In questo modo abbiamo attivato la libreria Chart.js per tutto il nostro progetto Laravel.

Configurazione controller

Passiamo dunque alla creazione del controller che si occuperà di recuperare i dati e di stamparli sul grafico. Per questo tutorial, e per mia esigenza, andremo a creare un grafico a torta ( pie ) che rappresenta i due possibili stati che i “cantieri” possono assumere:

  • Concluso
  • In elaborazione

Sempre dalla root del progetto, apriamo il terminale e generariamo il controller:

php artisan make:controller DashboardController --resource

Apriamo il nostro controller appena creato e costruiamo la funzione showChart() che verrà in seguito chiamata dal controller nella route prescelta.

public function showChart()
    {
    
            // Conta i cantieri per stato
    $interventiPerStato = Interventi::select('stato', DB::raw('count(*) as totale'))
        ->groupBy('stato')
        ->pluck('totale', 'stato');

    $labels = $interventiPerStato->keys()->toArray();
    $data = $interventiPerStato->values()->toArray();

    $chart = Chartjs::build()
        ->name("InterventiStatoChart")
        ->type("pie")
        ->size([
            'width' => 400,
            'height' => 400
        ])
        ->labels($labels)
        ->datasets([
            [
                'label' => 'Stato Cantieri',
                'backgroundColor' => ['#28a745', '#ffc107', '#aad104'],
                'data' => $data
            ]
        ])
        ->options([
            'responsive' => true,
            'plugins' => [
                'title' => [
                    'display' => true,
                    'text' => 'Stato Cantieri'
                ]
            ]
        ]);

    return view("dashboard", compact("chart"));

    }

Abbiamo scritto il controller, ora è il turno della route.

Configurazione route

In Laravel, una route (o “rotta”) è il meccanismo che collega un URL a un’azione specifica del tuo applicativo, come ad esempio la visualizzazione di una pagina o l’elaborazione di un form. In pratica, quando un utente visita una determinata URL, Laravel utilizza le route per decidere quale controller, funzione o vista eseguire.

Aprieamo quindi il file routes/web.php che gestisce le route ed aggiungiamo:

Route::get('/dashboard', [DashboardController::class, 'showChart'])->name('dashboard.showChart');

Prossimo step, sarà la creazione della view per poter renderizzare il risultato prodotto dal controller.

Configurazione view

Apriamo il file resources/views/dashboard.blade.php responsabile della visualizzazione del nostro grafico. Aggiungiamo quindi quanto segue:

@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid mt-4">
    <div class="row row-cols-12 row-cols-md-3">
        <div class="col">
            <div>
                <x-chartjs-component :chart="$chart" />
            </div>
        </div>
        <div class="col">
            <div>
                
            </div>
        </div>
        <div class="col">
            <div>
                
            </div>
        </div>
    </div>
</div>
@endsection
Come ultimo step, non ci resta che andare sul nostro browser preferito e digitare http://127.0.0.1:8000/dashboard per far caricare la nostra creazione: laravel chart.js

Considerazioni finali e link utili

Implementare Chart.js in un progetto Laravel è una scelta vincente per chi desidera creare dashboard moderne, report dinamici o visualizzazioni interattive dei dati. Grazie alla flessibilità del framework Laravel e alla semplicità di Chart.js, l’integrazione risulta fluida ed efficiente. Utilizzando npm per gestire la libreria frontend e, se necessario, un pacchetto come icehouse-ventures/laravel-chartjs per generare le configurazioni dal backend, è possibile mantenere il codice pulito e ben organizzato, separando logica e presentazione in modo elegante.

Un altro grande vantaggio è la personalizzazione: Chart.js permette di adattare lo stile dei grafici al design dell’applicazione, mentre Laravel offre strumenti robusti per gestire i dati da visualizzare, provenienti da database, API o calcoli interni. In definitiva, combinare Chart.js con Laravel consente di realizzare interfacce intuitive e visivamente efficaci, migliorando l’esperienza utente e offrendo un valore aggiunto in termini di analisi e comprensione dei dati.

Repository GitHub per laravel-chartjs: https://github.com/icehouse-ventures/laravel-chartjs

Sito ufficiale chart.js: https://www.chartjs.org/

Breve intro del pacchetto laravel-chartjs con esempi: https://icehouse-ventures.github.io/laravel-chartjs/

Happy dev!