How to create chart in Laravel 8?

Share Me
  •  
  •  
  •  
  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares
How to create chart in Laravel 8

Hello Dev’s, Today now in this example,I will give a short and simple example to you how to create chart in laravel 8 application. Here we will use laravel chart library to create our chart in laravel 8 application. Now here we will use consoletvs/charts package for adding chart in our laravel 8 application.

Here Laravel chart library is support Chartjs, Highcharts, Fusioncharts, Echarts, Frappe and also C3 libraries.

Now In this example we will create line chart by using Chartjs library for new registered users.

Just need to follow below step to create chart in your application:

Step 1: Install Laravel 8

Here we will create laravel 8 fresh application.

composer create-project --prefer-dist laravel/laravel ChartInLaravel
Step 2: Install Package

Now here we will install package so need to run below command in your terminal :

composer require consoletvs/charts

Publish Assets

In this step we will publish the assets using the following command.

php artisan vendor:publish --tag=charts_config
Step 3: Create User Chart Class

Just Run below command to create user chart class .

php artisan make:chart UserChart ChartJs

app\Charts\UserChart.php

Need to your userchart.php file should be like below :

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Chartjs\Chart;

class UserChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}
Step 4: Create Route

routes/web.php

Now need to add chart route in our web.php file.

Route::get('chart', 'ChartController@index');
Step 5: Create Controller

Here need to type below command to create ChartController :

php artisan make:controller ChartController

Then need to update controller file like as below :

app/Http/Controllers/ChartController.php

<?php

namespace App\Http\Controllers;

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

class ChartController extends Controller
{
    public function index()
    {
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');

        $chart = new UserChart;
        $chart->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        $chart->dataset('New User Register Chart', 'line', $users)->options([
            'fill' => 'true',
            'borderColor' => '#51C1C0'
        ]);

        return view('user', compact('chart'));
    }
}
Step 6: Create Blade File

Now just Put below code in user blade file :

resources/views/user.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Laravel Chart</title>
    </head>
    <body>
        <div style="width: 80%;margin: 0 auto;">
            {!! $chart->container() !!}
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
        {!! $chart->script() !!}
    </body>
</html>
</pre>

Read Also : How To disable button on click to prevent multiple form submits in jQuery?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →