Scribd
Upload
405 views

Laravel 5 Chart Example Using Charts Package

The document discusses how to create charts in Laravel applications using the consoletvs/charts package. It provides steps to install the package, configure it, add sample data, create a route and controller to generate a bar chart, and display it on a view. Examples are given for other chart types like pie, donut, line, area, areaspline, geo, and percentage charts. Configuration options are demonstrated.

Uploaded by

Amine
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
405 views

Laravel 5 Chart Example Using Charts Package

The document discusses how to create charts in Laravel applications using the consoletvs/charts package. It provides steps to install the package, configure it, add sample data, create a route and controller to generate a bar chart, and display it on a view. Examples are given for other chart types like pie, donut, line, area, areaspline, geo, and percentage charts. Configuration options are demonstrated.

Uploaded by

Amine
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Laravel 5 Chart example using Charts Package

laravelcode.com/post/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.
1/5
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

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

2/5
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

3/5
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

4/5
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...

5/5

You might also like