10-Apr-2023
.
Admin
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", "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.
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..
#Laravel 7
#Laravel
#Laravel 6
