How to use Charts In Laravel 5.7 Using Charts Package

Step: 1 Create a new Laraval 5.7 application

Create a new Laravel 5.7 application using the following command.

laravel new charts

After successfully creating a new project, now need to first install consoletvs/charts chart package for integrate chart in Laravel 5.7 application using the following command.

Step: 2 Install consoletvs/charts  package in Laravel 5.7

composer require "consoletvs/charts:5.*"

Note: You are using the latest version of the Laravel, I highly recommend to use the latest version of consoletvs/charts.

Step: 3 Configure Package

After install successfully consoletvs/charts package we are should configure this package service provider and alias in the config/app.php file.

app.php

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

After adding the above code we need them to the public vender.

php artisan vendor:publish

After entering this command we need to choose providers. In my case, I choose 2 becouse charts providers indexed in 2. Enter 2 and enter.

Step:4 Now add some dummy data to represent in the chart (if you have data in the database already skip this step)

Here we use fresh Laravel application so we need to add some data in the database so enter the following command to create a new migration table.

php artisan make:auth

After running this command we have migration file now, time to migrate table using this following command.

php aritsan migrate

After that, we need to add some dummy data so we are adding some records in user table using tinker. simply run following command.

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

Step: 5 Create route

Route::get('chart', '[email protected]')

Step: 6 Create a new Controller 

Create a new controller using this following command.

php artisan make:controller ChartContoller

And add the following command.

ChartController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Charts;
use App\User;
use DB;

class ChartController extends Controller
{
    //
    public function index()
    {
    	$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(false)
			      ->groupByMonth(date('Y'), true);
        return view('chart',compact('chart'));
    }
}

Step: 7 create a new view to show a chart

create a chart.blade.php  a view page and add some code.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Chart Demo</div>

                <div class="panel-body">
                    {!! $chart->html() !!}
                </div>
            </div>
        </div>
    </div>
</div>
{!! Charts::scripts() !!}
{!! $chart->script() !!}
@endsection

After that time to show our result in the browser. 

visit http://localhost:8000/chart

So, here is our result. 

If we want another chart we can easily add to the Laravel application.

Another chart example and some configure code

Pie Chart

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Charts;
use App\User;
use DB;

class ChartController extends Controller
{
    //
    public function index()
    {
    	$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(false)
			      ->groupByMonth(date('Y'), true);

		$pie  =	 Charts::create('pie', 'highcharts')
				    ->title('My nice chart')
				    ->labels(['First', 'Second', 'Third'])
				    ->values([5,10,20])
				    ->dimensions(1000,500)
				    ->responsive(false);
        return view('chart',compact('chart','pie'));
    }
}

In chart.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Chart Demo</div>

                <div class="panel-body">
                    {!! $chart->html() !!}
                </div>

                <hr>
                {!!$pie->html() !!}
            </div>
        </div>
    </div>
</div>
{!! Charts::scripts() !!}
{!! $chart->script() !!}

{!! $pie->script() !!}

@endsection

Result

2. Donut / Doughnut Chart

Charts::create('donut', 'highcharts')
    ->title('My nice chart')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

3. Line Chart

Charts::create('line', 'highcharts')
    ->title('My nice chart')
    ->elementLabel('My nice label')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

4. Area Chart

Charts::create('area', 'highcharts')
    ->title('My nice chart')
    ->elementLabel('My nice label')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

5. Areaspline Chart

Charts::multi('areaspline', 'highcharts')
    ->title('My nice chart')
    ->colors(['#ff0000', '#ffffff'])
    ->labels(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday', 'Sunday'])
    ->dataset('John', [3, 4, 3, 5, 4, 10, 12])
    ->dataset('Jane',  [1, 3, 4, 3, 3, 5, 4]);

6. Geo Chart

Charts::create('geo', 'highcharts')
    ->title('My nice chart')
    ->elementLabel('My nice label')
    ->labels(['ES', 'FR', 'RU'])
    ->colors(['#C5CAE9', '#283593'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

7. Percentage Chart

Charts::create('percentage', 'justgage')
    ->title('My nice chart')
    ->elementLabel('My nice label')
    ->values([65,0,100])
    ->responsive(false)
    ->height(300)
    ->width(0);

So, here we completed this post How to use Charts In Laravel 5.7 Using Charts Package.