Laravel 5 Chart example using Charts Package

Today, we are share with you how to use chart in laravel application using consoletvs/charts package. this package is provide very easy functionality working with many diffrent type chart. this package base on morris.js javascript library.

In large application when you represent data in graphical way then chart is best solution for it. so you can easyly integrate chart in your laravel ppalication using consoletvs/charts. this package provide following diffrent type chart.

1. line chart
2. area chart
3. bar chart
4. pie chart
5. donut chart
6. geo chart
7. gauge chart
8. temp chart
9. percentage chart
10. progressbar chart
11. areaspline chart
12. scatter chart

After done this demo your output look like this

Step : 1 Install Require Package

We are first install consoletvs/charts chart package for integrate chart in laravel application using following command.

composer require consoletvs/charts

Step : 2 Configure Package

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

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

Done configuration then after publish vendor folders using following command

php artisan vendor:publish

After run this command you can see in config folder config/charts.php file automatic generated. and all default chart view file is generated in resources/views/vendor folder

Step : 3 Add Dummy Records

[ADDCODE]

We are required some dummy data into the any table, which we are use in our chart. so we are add some drecords in user table using tinker. simply run following command

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

Step : 4 Create Route

Now add one route in your routes/web.php file.

Route::get('bar-chart', 'ChartController@index');

Step : 5 Create Controller

Now create ChartController.php file in app/Http/Controllers/ folders and put into it folowing code

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 : 6 Create View File

Now we are create view file for display chart, so create chart.blade.php file in resources/views/ folder and put following code into it.

First opeen your laravel resources/views/layouts/app.blade.php file and add one following line into head ssection

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

@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

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/bar-chart

Another chart example and some configure code

1. Pie Chart

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

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);

If you want to any problem then please write comment and also suggest for new topic for make tutorials in future. Thanks...