Laravel Google Bar Charts Example Tutorial

Laravel 6 , Laravel , Laravel 7

Nicesnippets

11543

02-07-2020


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 laravel.you 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.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

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

app/Employee.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model

{

protected $guarded = [];

}

you can create employee field in this migration.

database/migrations/2020_06_23_120117_create_employees_table.php

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

$table->id();

$table->string("name")->nullable();

$table->string("department_id")->nullable();

$table->string("salary")->nullable();

$table->timestamps();

});

then,you can migrate to table.below this command

php artisan migrate

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

database/factories/EmployeeFactory.php

<?php

/** @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

//then

factory(\App\Employee::class,100)->create()

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", "[email protected]_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.

app/http/controller/EmployeeController.php

<?php

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.

/resources/views/employee.blade.php

<!doctype html>

<html lang="en">

<head>

<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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

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

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

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

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

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

@php

foreach($employees as $employee) {

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

}

@endphp

]);

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));

}

</script>

</body>

</html>

It will help you..


Recommended Posts