Laravel 5 Chart example using Charts Package
It's always a good fit for understanding if we use some graphical way display our progress report using the 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 libraries available for a 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. progress bar chart
11. areaspline chart
12. scatter chart
Using ConsoleTVs/Charts package we can simply create above lists on the chart. We don't require to write jquery code for the chart we can manage it from a controller method. So here I give you a very easy example of bar chart using highcharts library, in this example, i display a 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 the 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
Hello, I just came accross this post and after implementing the steps above, i came across this error
ReplyDeleteClass 'ConsoleTVs\Charts\Charts' not found
on careful troubleshooting, i discover its from the aliase which is not available... do you know why it is not working... I am using laravel 5.6
Mine is also.
ReplyDeleteI don't know who has the solution to the great God
ReplyDeleteYou probably will find that the Charts model is installed in a folder called Charts. App\Charts\
ReplyDeleteI truly appreciate the time and work you put into sharing your knowledge. I found this topic to be quite effective and beneficial to me. Thank you very much for sharing. Continue to blog.
ReplyDeleteData Engineering Services
AI & ML Solutions
Data Analytics Services
Data Modernization Services