TheLazy.Dev
Portfolio GitHub

Blog

laravel |chartjs |laravelcharts

Use Laravel charts in Laravel.

arielmejiadev

Ariel Mejia

Posted on August 22, 2019

Use Laravel charts in Laravel.

If you need to add some graphs to your views, maybe you have work with some js library to add cool graphics but even with a good library like ChartJS implementing this is not so easy.

Installation

First we need to add a package to your Laravel project so in terminal add:



composer require consoletvs/charts:6.*
Enter fullscreen mode Exit fullscreen mode

If you are working with Laravel 5.5 or higher thats all you need to install the package thanks by autodiscover feature.

If you work with Laravel lower than 5.5 you will need to register a service provider, add this line into the config/app.php file in the providers section:



ConsoleTVs\Charts\ChartsServiceProvider::class,
Enter fullscreen mode Exit fullscreen mode

And to publish the configuration in terminal with the command:



php artisan vendor:publish --tag=charts_config
Enter fullscreen mode Exit fullscreen mode

Now you have the package installation done!

Use the package

We are going to use artisan cli to create a chart class.



php artisan make:chart UserChart
Enter fullscreen mode Exit fullscreen mode

Now in app directory we can see a folder named charts and there is our new class UserChart.php.

I will explain with an easy example but you can add as many complexity as you want, we are going to create a controller of type resource to display user chart:



php artisan make:controller UserChartController -r
Enter fullscreen mode Exit fullscreen mode

Now you can edit the file in app/Http/Controllers/UserChartController.php and only hold the index method all other rest full methods can be deleted, and you will have something like this:



<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

}
Enter fullscreen mode Exit fullscreen mode

To make it more easy I will create a fake data but you can use eloquent o queryBuilder to create queries as you need, I will import the new chart class created before to the controller, and start to create a chart with Laravel chart api fluid syntax:



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

Now we need a view to show the data in the last code snippet the index method returns a view for users charts, so I will create a file in resources/views/ named users.blade.php, with next content: 



@extends('layouts.app')

@section('content')
<h1>Sales Graphs</h1>

<div style="width: 50%">
    {!! $salesChart->container() !!}
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

Now we pass the chart script to the view file we only need to add the chart css and js library files, to keep it simple we are going to use the layout app blade file, it is located in resources/views/layout/app.blade.php, here we are going to add in header section the next line at the very bottom:



<head>
    <meta charset="utf-8">
    ...
    {{-- ChartScript --}}
    @if($usersChart)
    {!! $usersChart->script() !!}
    @endif
</head>
Enter fullscreen mode Exit fullscreen mode

To add JS library file we are going to the bottom to the file app.blade.php, before the html close tag and add the scripts:



@extends('layouts.app')

@section('content')
<h1>Users Graphs</h1>

<div style="width: 50%">
    {!! $usersChart->container() !!}
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

Finally we only need a route to access to the graphic view, in routes/web.php file you can add a route with get method to access to the usersChartController class in method index() in the example I set a route to 'sales':



<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

....

Route::get('users', 'UserChartController@index');
Enter fullscreen mode Exit fullscreen mode

Alt Text

Well it is simple but, maybe you want to customize it a little bit more, you can customize the charts by two ways, you can customize the "dataset" and the chart as itself, to start we are going to customize the "dataset":



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)");
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

  • The method "color" set the border color in the case of a "line" or "area" charts it sets the line color, and as param requires a string with the rgb or rgba color

  • The method "backgroundcolor" set the area color, the color to fill, and as param requires a string with the rgb or rgba color

Alt Text

  • "fill" method requires a boolean and it paint the area or not if it is set as false, by default a chart is filled.

Alt Text

  • "linetension" method make less curved a line and it requires a float from 0.0 to 1.0

Alt Text

  • "dashed" method makes the line a dashed line and it requires an array.

Alt Text

Customize the chart

  • To customize the chart we can use some methods:
    • "minimalist" method requires a boolean and it removes the grid background and the legend of the chart
    • "displaylegend" methods requires a boolean and it is true by default, to hide the legend set false as param.
    • "displayaxes" method requieres a boolean and by default is true it, paint the background grid of the chart, to hide it just set false as the param.
    • "barWidth" this method does not do anything in line and area charts, it requires a double.


<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->title('Users by Months', 30, "rgb(255, 99, 132)", true, 'Helvetica Neue');
        $usersChart->barwidth(0.0);
        $usersChart->displaylegend(false);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)")
            ->fill(false)
            ->linetension(0.1)
            ->dashed([5]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Doughnutexample: 



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'doughnut', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Bar example

With a little effort and the default bootstrap from Laravel installation:

UserChartController to generate the chart 



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'bar', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

blade view with some bootstrap for styling 



@extends('layouts.app')

@section('content')


<div class="container">
    <h1>Users Graphs</h1>
    <div class="row">
        <div class="col-6">
            <div class="card rounded">
                <div class="card-body py-3 px-3">
                    {!! $usersChart->container() !!}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
Enter fullscreen mode Exit fullscreen mode

Alt Text

Here is the code on Github repo:

https://github.com/ArielMejiaDev/SNIPPET_Laravel-charts

💖 💪 🙅 🚩
arielmejiadev
Ariel Mejia

Posted on August 22, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Use Laravel charts in Laravel.
laravel Use Laravel charts in Laravel.

August 22, 2019