Skip to content

All topics  /  Laravel

Laravel Google Bar Charts Example Tutorial

Laravel ·

Teams applying “Laravel Google Bar Charts Example Tutorial” in a production project can use employee churn prediction to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

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", "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..

More on this topic