Hi Guys,
Today,I will learn you how to use consoletvs charts in laravel 8. If you need to add some graphs to your views, maybe you have work with some js library to add cool graphics but even with a good library like ChartJS implementing this is not so easy.
Step 1: Install Laravel 8 Application
we are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2 :Installing consoletvs Package
Now In this step, install consoletvs/charts:6 package in laravel 8 app via following command.
composer require consoletvs/charts:6
If you are working with Laravel 5.5 or higher thats all you need to install the package thanks by autodiscover feature.
If you work with Laravel lower than 5.5 you will need to register a service provider, add this line into the config/app.php file in the providers section:
ConsoleTVs\Charts\ChartsServiceProvider::class,
And to publish the configuration in terminal with the command:
php artisan vendor:publish --tag=charts_config
Now you have the package installation done!
Step 3: Use the package
in this step, We are going to use artisan cli to create a chart class.
php artisan make:chart UserChart
Now in app directory we can see a folder named charts and there is our new class UserChart.php.
Step 4: Create Controller
I will explain with an easy example but you can add as many complexity as you want, we are going to create a controller of type resource to display user chart:
php artisan make:controller UserChartController -r
Now you can edit the file in app/Http/Controllers/UserChartController.php and only hold the index method all other rest full methods can be deleted, and you will have something like this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
}
}
To make it more easy I will create a fake data but you can use eloquent o queryBuilder to create queries as you need, I will import the new chart class created before to the controller, and start to create a chart with Laravel chart api fluid syntax:
<?php
namespace App\Http\Controllers;
use App\Charts\UserChart;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$usersChart = new UserChart;
$usersChart->labels(['Jan', 'Feb', 'Mar']);
$usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
return view('users', [ 'usersChart' => $usersChart ] );
}
}
Now we need a view to show the data in the last code snippet the index method returns a view for users charts, so I will create a file in resources/views/ named users.blade.php, with next content:
@extends('layouts.app')
@section('content')
<h1>Sales Graphs</h1>
<div style="width: 50%">
{!! $salesChart->container() !!}
</div>
@endsection
Now we pass the chart script to the view file we only need to add the chart css and js library files, to keep it simple we are going to use the layout app blade file, it is located in resources/views/layout/app.blade.php, here we are going to add in header section the next line at the very bottom:
<head>
<meta charset="utf-8">
...
{{-- ChartScript --}}
@if($usersChart)
{!! $usersChart->script() !!}
@endif
</head>
To add JS library file we are going to the bottom to the file app.blade.php, before the html close tag and add the scripts:
@extends('layouts.app')
@section('content')
<h1>Users Graphs</h1>
<div style="width: 50%">
{!! $usersChart->container() !!}
</div>
@endsection
Finally we only need a route to access to the graphic view, in routes/web.php file you can add a route with get method to access to the usersChartController class in method index() in the example I set a route to 'sales':
<?php
use App\Http\Controllers\UserChartController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
....
Route::get('users', 'UserChartController@index');
Well it is simple but, maybe you want to customize it a little bit more, you can customize the charts by two ways, you can customize the "dataset" and the chart as itself, to start we are going to customize the "dataset":
<?php
namespace App\Http\Controllers;
use App\Charts\UserChart;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$usersChart = new UserChart;
$usersChart->labels(['Jan', 'Feb', 'Mar']);
$usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
->color("rgb(255, 99, 132)")
->backgroundcolor("rgb(255, 99, 132)");
return view('users', [ 'usersChart' => $usersChart ] );
}
}
The method "color" set the border color in the case of a "line" or "area" charts it sets the line color, and as param requires a string with the rgb or rgba color
The method "backgroundcolor" set the area color, the color to fill, and as param requires a string with the rgb or rgba color
"fill" method requires a boolean and it paint the area or not if it is set as false, by default a chart is filled.
"linetension" method make less curved a line and it requires a float from 0.0 to 1.0
"dashed" method makes the line a dashed line and it requires an array.
Customize the chart
To customize the chart we can use some methods:
->"minimalist" method requires a boolean and it removes the grid background and the legend of the chart
->"displaylegend" methods requires a boolean and it is true by default, to hide the legend set false as param.
->"displayaxes" method requieres a boolean and by default is true it, paint the background grid of the chart, to hide it just set false as the param.
->"barWidth" this method does not do anything in line and area charts, it requires a double.
<?php
namespace App\Http\Controllers;
use App\Charts\UserChart;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$usersChart = new UserChart;
$usersChart->title('Users by Months', 30, "rgb(255, 99, 132)", true, 'Helvetica Neue');
$usersChart->barwidth(0.0);
$usersChart->displaylegend(false);
$usersChart->labels(['Jan', 'Feb', 'Mar']);
$usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
->color("rgb(255, 99, 132)")
->backgroundcolor("rgb(255, 99, 132)")
->fill(false)
->linetension(0.1)
->dashed([5]);
return view('users', [ 'usersChart' => $usersChart ] );
}
}
Doughnutexample:
<?php
namespace App\Http\Controllers;
use App\Charts\UserChart;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$borderColors = [
"rgba(255, 99, 132, 1.0)",
"rgba(22,160,133, 1.0)",
"rgba(255, 205, 86, 1.0)",
"rgba(51,105,232, 1.0)",
"rgba(244,67,54, 1.0)",
"rgba(34,198,246, 1.0)",
"rgba(153, 102, 255, 1.0)",
"rgba(255, 159, 64, 1.0)",
"rgba(233,30,99, 1.0)",
"rgba(205,220,57, 1.0)"
];
$fillColors = [
"rgba(255, 99, 132, 0.2)",
"rgba(22,160,133, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(51,105,232, 0.2)",
"rgba(244,67,54, 0.2)",
"rgba(34,198,246, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(233,30,99, 0.2)",
"rgba(205,220,57, 0.2)"
];
$usersChart = new UserChart;
$usersChart->minimalist(true);
$usersChart->labels(['Jan', 'Feb', 'Mar']);
$usersChart->dataset('Users by trimester', 'doughnut', [10, 25, 13])
->color($borderColors)
->backgroundcolor($fillColors);
return view('users', [ 'usersChart' => $usersChart ] );
}
}
Bar example
With a little effort and the default bootstrap from Laravel installation:
UserChartController to generate the chart
<?php
namespace App\Http\Controllers;
use App\Charts\UserChart;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$borderColors = [
"rgba(255, 99, 132, 1.0)",
"rgba(22,160,133, 1.0)",
"rgba(255, 205, 86, 1.0)",
"rgba(51,105,232, 1.0)",
"rgba(244,67,54, 1.0)",
"rgba(34,198,246, 1.0)",
"rgba(153, 102, 255, 1.0)",
"rgba(255, 159, 64, 1.0)",
"rgba(233,30,99, 1.0)",
"rgba(205,220,57, 1.0)"
];
$fillColors = [
"rgba(255, 99, 132, 0.2)",
"rgba(22,160,133, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(51,105,232, 0.2)",
"rgba(244,67,54, 0.2)",
"rgba(34,198,246, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(233,30,99, 0.2)",
"rgba(205,220,57, 0.2)"
];
$usersChart = new UserChart;
$usersChart->minimalist(true);
$usersChart->labels(['Jan', 'Feb', 'Mar']);
$usersChart->dataset('Users by trimester', 'bar', [10, 25, 13])
->color($borderColors)
->backgroundcolor($fillColors);
return view('users', [ 'usersChart' => $usersChart ] );
}
}
blade view with some bootstrap for styling
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Users Graphs</h1>
<div class="row">
<div class="col-6">
<div class="card rounded">
<div class="card-body py-3 px-3">
{!! $usersChart->container() !!}
</div>
</div>
</div>
</div>
</div>
@endsection
It will help you...
