It's always good fit for understand if we use some graphical way display our progress report using chart. So if you are working with laravel 5 framework then you can use chart very simple way and best layout. There are several js library available for chart like chartjs, highcharts, google, material, chartist, fusioncharts, morris, plottablejs etc. in this example we will just use one laravel "ConsoleTVs/Charts" composer package and you can use all the chart library.
Using above library you can simply create following Charts.
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
Using ConsoleTVs/Charts package we can simply create above lists on chart. We don't require to write jquery code for chart we can manage it from controller method. So here i give you very easy example of bar chart using highcharts library, in this example i display bar chart of new user registration on current year month, that way we can identify which month comes more new users registration. So after done this example you will find following layout:
Install Package:
first of all we will install ConsoleTVs/Charts composer package by following composer command in your laravel 5 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,
]
Add 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();
Create Routes:
Now we will add routes for demo example, so simply add following route in your route file:
routes/web.php
Route::get('my-chart', 'ChartController@index');
Create 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 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'));
}
}
Add chart.blade.php 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>
<head>
<title>Laravel 5 Chart example using Charts Package</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
{!! Charts::assets() !!}
</head>
<body>
<div class="container">
<h1>Laravel 5 Chart example using Charts Package</h1>
{!! $chart->render() !!}
</div>
</body>
</html>
Now, finally we are ready to run this example. So you can run and check on following path:
http://localhost:8000/my-chart
I hope you found your best.
Do you like below Tutorials ?
- PHP Convert Date String to Datetime Object
- Laravel Validation Different Value Example
- Jquery Redirect to URL After Specific Time Example
- User Roles and Permissions in Laravel Example
- How to Get Value of Selected Option in Vue JS?
- Laravel Change Password OLD Password Validation Example
- Vue JS Get String Length Example
- How to Active and Inactive Status in Laravel?