Laravel 5.6 - Generate Free Charts and Graphs Example

Here, i will let you know how to generate charts in laravel 5.6 application using consoletvs charts package. i will create line chart, geo chart, bar chart, pie chart, donut chart, line chart and area chart example in laravel. you can also create gauge chart, progressbar chart, areaspline chart, scatter chart, percentage chart etc using consoletvs charts composer package.

In this tutorial i just install consoletvs charts composer package and create one route with parameter. parameter is a chart name and then in controller i just create one method and write code for chart.

So, you have to just follow bellow few step and you will get all charts example, so let's see bellow example:

Step 1: Install ConsoleTVs Package

first of all we will install ConsoleTVs/Charts composer package by following composer command in your laravel 5.6 application.

composer require consoletvs/charts

After successfully install package, open config/app.php file and add service provider and alias.

config/app.php

'providers' => [
	....
	ConsoleTVs\Charts\ChartsServiceProvider::class,
],
'aliases' => [
	....
	'Charts' => ConsoleTVs\Charts\Facades\Charts::class,
]

Step 2: Create Users Dummy Records

you have users table by running default migrations of laravel. So we have to generate dummy records for demo in users table. So let's run bellow command and get dummy records.

php artisan tinker
>>> factory(App\User::class, 20)->create();

Step 3: Add Routes

Now we will add routes for demo example, so simply add following route in your route file:

routes/web.php

Route::get('create-chart/{type}','ChartController@makeChart');

Step 4: Add New Controller

Here,we require to create new controller ChartController that will manage index method of route. So let's put bellow code.

app/Http/Controllers/ChartController.php

<?php

namespace App\Http\Controllers;

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

class ChartController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function makeChart($type)
    {
        switch ($type) {
            case 'bar':
                $users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y')) 
                        ->get();
                $chart = Charts::database($users, 'bar', 'highcharts') 
                            ->title("Monthly new Register Users") 
                            ->elementLabel("Total Users") 
                            ->dimensions(1000, 500) 
                            ->responsive(true) 
                            ->groupByMonth(date('Y'), true);
                break;

            case 'pie':
                $chart = Charts::create('pie', 'highcharts')
                            ->title('HDTuto.com Laravel Pie Chart')
                            ->labels(['Codeigniter', 'Laravel', 'PHP'])
                            ->values([5,10,20])
                            ->dimensions(1000,500)
                            ->responsive(true);
                break;

            case 'donut':
                $chart = Charts::create('donut', 'highcharts')
                            ->title('HDTuto.com Laravel Donut Chart')
                            ->labels(['First', 'Second', 'Third'])
                            ->values([5,10,20])
                            ->dimensions(1000,500)
                            ->responsive(true);
                break;

            case 'line':
                $chart = Charts::create('line', 'highcharts')
                            ->title('HDTuto.com Laravel Line Chart')
                            ->elementLabel('HDTuto.com Laravel Line Chart Lable')
                            ->labels(['First', 'Second', 'Third'])
                            ->values([5,10,20])
                            ->dimensions(1000,500)
                            ->responsive(true);
                break;

            case 'area':
                $chart = Charts::create('area', 'highcharts')
                            ->title('HDTuto.com Laravel Area Chart')
                            ->elementLabel('HDTuto.com Laravel Line Chart label')
                            ->labels(['First', 'Second', 'Third'])
                            ->values([5,10,20])
                            ->dimensions(1000,500)
                            ->responsive(true);
                break;

            case 'geo':
                $chart = Charts::create('geo', 'highcharts')
                            ->title('HDTuto.com Laravel GEO Chart')
                            ->elementLabel('HDTuto.com Laravel GEO Chart label')
                            ->labels(['ES', 'FR', 'RU'])
                            ->colors(['#3D3D3D', '#985689'])
                            ->values([5,10,20])
                            ->dimensions(1000,500)
                            ->responsive(true);
                break;

            default:
                # code...
                break;
        }
        return view('chart', compact('chart'));
    }
}

Step 5: Create Blade File

At last we require to create blade file call chart.blade.php, will bootstrap layout. So let's add bellow code:

resources/views/chart.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My Charts</title>

        {!! Charts::styles() !!}

    </head>
    <body>
        <!-- Main Application (Can be VueJS or other JS framework) -->
        <div class="app">
            <center>
                {!! $chart->html() !!}
            </center>
        </div>
        <!-- End Of Main Application -->
        {!! Charts::scripts() !!}
        {!! $chart->script() !!}
    </body>
</html>

Now, finally we are ready to run this example. So you can run and check on following path:

http://localhost:8000/create-chart/bar
http://localhost:8000/create-chart/pie
http://localhost:8000/create-chart/donut
http://localhost:8000/create-chart/line
http://localhost:8000/create-chart/area
http://localhost:8000/create-chart/geo

I hope you found your best.