Laravel Google Bar Charts Example Tutorial




Laravel Google Bar Charts Example Tutorial

Hi Guys,

In this tutorial.I will learn you how to use dynamic char bar using google charts in can easy and simply use dynamic chart in laravel.

Google has provide us different type of Google chart. So, in this post we are going to create dynamic bar chart by using Google Chart API in Laravel application.

I will just create a simple employee model and a employee controller to create this laravel google charts example. Then i will fetch employee data from database and finally set in google bar chart function.

Step 1 : Install Laravel App

In this step, You can install laravel fresh app. So open terminal and put the bellow command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.







Step 3: Create Model,Migration and Factory

you need a product table to create dynamic laravel charts. Also we need factory to generate some fake dummy products. So create it using below command.

php artisan make:model Product Employee -fm

Now open employee model and set it like below


namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model


protected $guarded = [];


you can create employee field in this migration.


Schema::create('employees', function (Blueprint $table) {







then,you can migrate to table.below this command

php artisan migrate

Now you can to create our factory to generate some dummy products.



/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Employee;

use Faker\Generator as Faker;

$factory->define(Employee::class, function (Faker $faker) {

return [

"name" => $faker->word,

"department" => $faker->numberBetween(1,100),

"salary" => $faker->numberBetween(1, 100),



Now open your terminal and paste it in your termial to create some fake data

php artisan tinker



After running this command we will get 100 employee in our employees table.

Step 4 : Create Route

now, we need to add for EmployeeController in laravel application. so open your "routes/web.php" file and add following route.

Route::get("barchart", "EmployeeController@get_all_employees");

Step 5 : Create Controler

Here this step now we should create new controller as StudentController. So run bellow command and create new controller.

php artisan make:controller EmployeeController

successfully run above command then,you can create method for get courses and fetch record Employees table.



namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Employee;

class EmployeeController extends Controller


public function get_all_employees()


$employees = Employee::all();

return view('employee',['employees' => $employees]);



Step 6 : Create Blade File

In this step,you can create to blade file.this file is use to layout create to browser.


<!doctype html>

<html lang="en">


<title>Google Bar Chart</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<h2 style="text-align: center;">Laravel Google Bar Charts Example Tutorial -</h2>

<div class="container-fluid p-5">

<div id="barchart_material" style="width: 100%; height: 500px;"></div>


<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script type="text/javascript" src=""></script>

<script type="text/javascript">

google.charts.load('current', {'packages':['bar']});


function drawChart() {

var data = google.visualization.arrayToDataTable([

['Employee Id', 'Salary', 'Department'],


foreach($employees as $employee) {

echo "['".$employee->id."', ".$employee->salary.", ".$employee->department_id."],";




var options = {

chart: {

title: 'Bar Graph | Salary',

subtitle: 'Salary, and Department: @php echo $employees[0]->created_at @endphp',


bars: 'vertical'


var chart = new google.charts.Bar(document.getElementById('barchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));





It will help you..

#Laravel 7


#Laravel 6