Laravel 7.x and 6.x Chart example using Charts Package

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:

Laravel 7.x and 6.x Chart example using Charts Package

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles