Exploring one of the best Laravel chart libraries

As corporations turn out to be extra data-driven, the necessity to gather and analyze knowledge effectively continues to rise. This want makes charts more and more precious as a software that helps individuals simplify difficult knowledge and talk info shortly and successfully.

It is not uncommon for builders to make use of database info to create visualizations which might be simple for customers to understand. Since charts have turn out to be a standard function in web sites, it is smart to make use of chart libraries that allow the creation of those visualizations with out writing a whole bunch of traces of code or constructing from scratch.

On this article, we’ll check out one of the best chart libraries in Laravel and the way you should use them in your tasks. We’ll use these libraries to create line charts, bar charts, and pie charts.

The Laravel chart libraries we’ll be overlaying are:

I selected these three libraries particularly for his or her seamless integration into tasks and the only a few traces of code they require to spin up a full-fledged chart. Let’s dive into them!

Bounce forward:

What’s Larapex Charts?

Larapex Charts is a Laravel wrapper round ApexCharts. With the assistance of this bundle, we will simply create and render charts in our Laravel software with out writing any JavaScript code.

This bundle supplies us with pie charts, donut charts, space charts, line charts, and others. To utilize the Larapex Charts library in your venture, set up it with composer:

composer require arielmejiadev/larapex-charts

After putting in this library with the command above, it’s best to see the under:

Subsequent, publish Larapex’s config recordsdata to make them accessible to your software:

php artisan vendor:publish –tag=larapex-charts-config

When you see DONE in inexperienced textual content as proven within the picture under, you’ll have efficiently arrange Larapex Charts:

Now you should use Larapex Charts in your venture.

Utilizing Larapex Charts to create a bar chart

The Larapex Charts bundle supplies a chart class. We’ll must create an occasion of this class, which I’ll title ExpensesChart for this instance:

php artisan make:chart ExpensesChart

After operating the above command, you’ll be prompted to pick out the kind of chart you wish to create. Let’s create a bar chart first:

A chart class shall be created in app/Charts/ExpensesChart. You possibly can customise the chart by giving values to its properties. Set the title of your chart utilizing setTitle, your chart knowledge utilizing addData, and the values on the x axis utilizing setXAxis:

<?php
namespace AppCharts;
use ArielMejiaDevLarapexChartsLarapexChart;
class ExpensesChart
{
    protected $chart;
    public operate __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    }
    public operate construct(): ArielMejiaDevLarapexChartsBarChart
    {
        return $this->chart->barChart()
            ->setTitle('My July Bills.')
            ->setSubtitle('Weekly bills in july.')
            ->addData('Payments', [26, 39, 10, 48])
            ->addData('Trip', [70, 13, 36, 94])
            ->addData('EatOuts',[50, 60, 70, 30])
            ->setXAxis(['Week1', 'Week2', 'Week3', 'Week4']);
    }
}

Subsequent, create a controller to assist construct and render the chart:

php artisan make: controller ExpensesController –r

It’s best to see a message confirming that the controller was created efficiently:

Navigate to app/HTTP/Controller/ExpensesController and import the ExpensesChart class you created. Within the index operate, create an object of ExpensesChart and use the construct() operate within the ExpensesChart class to create your chart. The chart can then be handed to a view:

<?php
namespace AppHttpControllers;
use AppChartsExpensesChart;
use IlluminateHttpRequest;
class ExpensesController extends Controller
{
    /**
     * Show a list of the useful resource.
     *
     * @return IlluminateHttpResponse
     */
    public operate index(ExpensesChart $chart)
    {
        return view('bills.index', ['chart' => $chart->build()]);   
    }
}

Within the code above, we handed the chart object to bills.index, which is an index.blade.php file in an Bills folder. Right here’s the place you will discover the folder:

To make sure that the index operate is invoked when the view web page is accessed, we have to create a route for it in routes/internet.php.

First, import your controller ExpensesController. Then create a route /bills, which triggers the index operate within the ExpensesController class and returns the suitable view file:

<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersExpensesController;
Route::get('/bills', [ExpensesController::class, 'index'])->title('bills.index');

The chart can now be rendered in your view utilizing $chart->container(). On the backside of the web page, add the bundle’s CDN and script recordsdata:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Appropriate" content material="ie=edge">
    <title>Chart Instance</title>
    <hyperlink href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<physique class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
    <div class="p-6 m-20 bg-white rounded shadow">
        {!! $chart->container() !!}
    </div>
</div>
<script src="https://weblog.logrocket.com/exploring-best-laravel-chart-libraries/{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</physique>
</html>

Now in case you navigate to localhost:8000/bills in your browser, the bar chart ought to be seen:

Creating different forms of charts

Larapex Charts isn’t restricted to only bar charts. We are able to create different forms of charts with it following the identical course of.

For instance, to create a pie chart, after operating the php artisan make:chart command in your terminal, choose Pie Chart from the record of choices offered:

Identical to earlier than, customise your chart to suit your necessities, like so:

<?php
namespace AppCharts;
use ArielMejiaDevLarapexChartsLarapexChart;
class IncomeChart
{
    protected $chart;
    public operate __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    }
    public operate construct(): ArielMejiaDevLarapexChartsPieChart
    {
        return $this->chart->pieChart()
            ->setTitle('My Month-to-month Earnings')
            ->setSubtitle('July Earnings')
            ->addData([400, 500,700, 300])
            ->setLabels(['income1', 'income2', 'income3']);
    }
}

Subsequent, create a controller with the next command:

php artisan make: controller IncomeController –r

It will mean you can construct and render your chart, like so:

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppChartsIncomeChart;
class IncomeController extends Controller
{
    /**
     * Show a list of the useful resource.
     *
     * @return IlluminateHttpResponse
     */
    public operate index(IncomeChart $chart)
    {
        return view('earnings.index', ['chart' => $chart->build()]);
    }

Create a route to attach your controller together with your view:

<?php 
Use IlluminateSupportFacadesRoute;
Use AppHttpControllersIncomeController;
Route::get(‘/earnings’, [IncomeController::class, ‘index’]) ->title(‘earnings.index’);

Lastly, render the chart in your view with $chart->container().

<physique class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
    <div class="p-6 m-20 bg-white rounded shadow">
        {!! $chart->container() !!}
    </div>
</div>
<script src="https://weblog.logrocket.com/exploring-best-laravel-chart-libraries/{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</physique>

The outcome:

Exploring ConsoleTVs/Charts v6

Though v7 of the ConsoleTV/Charts library was not too long ago deprecated, v6 continues to be energetic and functioning. This library helps builders combine Chart.js into Laravel purposes with out having to put in writing any JavaScript code. With this library, builders can create charts by way of an API.

Set up the bundle in your software:

composer require consoletvs/charts “6.*”

We now have the library in our software and might proceed to make use of it to create charts.

Utilizing ConsoleTVs/Charts to create a pie chart

Run the next command to create a brand new chart mannequin:

php artisan make:chart IncomeChart

It’s best to see a affirmation message just like the one under:

The command above creates an IncomeChart class inside app/Charts. It has a constructor operate, which helps to initialize your chart.

Subsequent, we want a controller to assist generate our chart knowledge:

php artisan make:controller IncomeChartController -r

Navigate to your new controller app/Http/Controllers/UserChartController.php and add some knowledge on your chart.

As you’ll be able to see under, we’re making a chart that exhibits earnings for the months of June, July, and August. Inside labels, you’ll discover the values on the X axis. Likewise, in dataset, you’ll discover the values on the Y axis. Right here’s the code:

<?php
namespace AppHttpControllers;
use AppChartsIncomeChart;
use IlluminateHttpRequest;
class IncomeChartController extends Controller
{
    /**
     * Show a list of the useful resource.
     *
     * @return IlluminateHttpResponse
     */
    public operate index()
    {
        $incomeChart = new IncomeChart;
        $incomeChart->labels(['June', 'July', 'August']);
        $incomeChart->dataset('Earnings', 'pie', [400, 392, 355]);
        return view('earnings', [ 'incomeChart' => $incomeChart ] );
    }
}

Discover how we created an occasion of our IncomeChart mannequin and used the occasion to create our chart knowledge. We then move the chart knowledge to a view named earnings, which we now should create.

Navigate to sources/views/ and create a file named earnings.blade.php. On this view file, we will entry the chart we created earlier through the use of the container() operate, which comes with the incomeChart mannequin we additionally created earlier:

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

We additionally want so as to add the CDN for Chart.js contained in the head tags:

<head>
    {{-- ChartStyle --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
</head>

Moreover, we’ll want so as to add another script recordsdata for the library within the physique tag:

...
    {!! $incomeChart->script() !!}
</physique>

Finally, your view file ought to seem like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    {{-- ChartStyle --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
</head>
<physique>
    <div id="app">

        <essential class="py-4">
        <div class="container">
            <h1>Earnings Graph</h1>
            <div class="row">
                <div class="col-6">
                    <div class="card rounded">
                        <div class="card-body py-3 px-3">
                            {!! $incomeChart->container() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </essential>
    </div>

    {{-- Chartscript --}}
    @if($incomeChart)
    {!! $incomeChart->script() !!}
    @endif
</physique>
</html>

Lastly, we want a path to name our controller from an internet URL:

Route::get('/earnings', [IncomeChartController::class, 'index']);

Now in case you navigate to localhost:8000/earnings in your browser, your pie chart ought to be seen:

Should you return to your controller and alter pie to line or bar, it’s best to get the corresponding outcomes as properly.

For a line chart:

For a bar chart:

What’s laravel-charts?

The final chart library we’ll cowl is laravel-charts. Identical to the earlier choice, this bundle additionally helps builders create Chart.js charts contained in the Blade recordsdata of a Laravel software with out writing any JavaScript code.

Run the next command to put in laravel-charts:

composer require laraveldaily/laravel-charts

To discover find out how to use laravel-charts, we’ll plot a chart of customers in opposition to the month they have been added to our database. Go to phpmyadmin and create a database named customers, then add the database title in your .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=customers
DB_USERNAME=root
DB_PASSWORD=

As we create the customers desk, we’ll use Laravel’s DatabaseSeeder to create some dummy customers for our chart. Navigate to DatabaseSeedersDatabaseSeeder and easily uncomment the code under:

public operate run()
    {
        AppModelsUser::manufacturing unit(10)->create();
        AppModelsUser::manufacturing unit()->create([
            'name' => 'Test User',
            'email' => '[email protected]',
        ]);
    }

Now we’re able to migrate and seed our database:

php artisan migrate --seed

With that, now we have created the customers for our chart to show. Now, we’ll proceed to creating the chart itself. We’ll create the chart in a controller after which move it to a view.

First, create the controller:

php artisan make:controller UserController

Navigate to the newly created controller — namespace AppHttpControllerUserController — and create the chart within the index operate:

public operate index()
    {
        $chart_options = [
            'chart_title' => 'Users by months',
            'report_type' => 'group_by_date',
            'model' => 'AppModelsUser',
            'group_by_field' => 'created_at',
            'group_by_period' => 'month',
            'chart_type' => 'bar',
        ];
        $chart1 = new LaravelChart($chart_options);

        return view('residence', compact('chart1'));
    }

We’ll now create a variable $chart_options and provides it an array of choices for our chart:

• chart_title — textual content to be displayed within the legend
• report_type — determines how chart knowledge shall be grouped
• mannequin — the supply of chart knowledge
• group_by_field — the sphere in our database that shall be used within the group_by clause
• group_by_period — used to specify the date for group_by_date report sort
  • Worth may be day, week, month, or yr

The subsequent step is to create an object of the LaravelChart class from the chart bundle we put in. First, import the category:

use LaravelDailyLaravelChartsClassesLaravelChart;

Then, use it to create an object:

$chart1 = new LaravelChart($chart_options);

Lastly, move it to your view:

return view('residence', compact('chart1'));

To render the chart in your view, add the required CDN and boilerplate code in your blade file:

{!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!}

Now you’ll be able to render the chart:

<div>
    <h1>{{ $chart1->choices['chart_title'] }}</h1>
                    {!! $chart1->renderHtml() !!}
</div>

Should you want it, right here is the complete code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Appropriate" content material="ie=edge">
    <title>Chart Pattern</title>
    <hyperlink href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<physique class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
    <div class="p-6 m-20 bg-white rounded shadow">
    <h1>{{ $chart1->choices['chart_title'] }}</h1>
                    {!! $chart1->renderHtml() !!}
    </div>
</div>
{!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!}
</physique>
</html>

Under, you’ll be able to see what the outcome ought to seem like in a browser:

To create a pie chart as an alternative, navigate to your controller and alter the worth of chart_type to pie:

'chart_type' => 'pie'

For a line chart, make the worth line:

'chart_type' => 'line'

Conclusion

On this information, we mentioned the three greatest Laravel chart libraries that builders can use so as to add charts to their Laravel software: Larapex Charts, ConsoleTVs/Charts v6, and laravel-charts.

We used all three of those libraries to create pattern line, bar, and pie charts — though none of those libraries are restricted to those three forms of charts. Hopefully, now you can confidently implement any of those chart libraries in your subsequent Laravel venture.