Laravel 9 Google Bar Chart Tutorial Example

In this tutorial you will learn about the Laravel 9 Google Bar Chart Tutorial Example and its application with practical example.

In this Laravel 9 Google Bar Chart Tutorial Example I’ll will show how to use google Bar chart in laravel 9 application. In this tutorial you will learn to implement google Bar char in laravel 9 project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google Bar chart in laravel 9.

Table Of Contents−

Laravel 9 Google Bar Chart Tutorial Example

In this step by step tutorial I will demonstrate you how to create google Bar char in laravel 9 application. Please follow instruction given below:

Install Laravel 9
Add Database Details

Generate Migration & Model File
Add Route
Create Controller

Create Blade File
Run Development Server

Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Add Database Configuration

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .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

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

Generate Migration & Model File

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Order -fm

1	php artisan make:model Order -fm

Now, go to app directory and open Order.php file. And put the following code into your Order.php file:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Order extends Model
{
    protected $guarded = [];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Order extends Model

{

protected $guarded = [];

}

Now, go to database/migrations/ and open create_orders_table.php file and update the following code:

Schema::create('orders', function (Blueprint $table) {
    $table->id();
    $table->string("product_name")->nullable();
    $table->string("product_id")->nullable();
    $table->string("price")->nullable();
    $table->timestamps();
});

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

$table->id();

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

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

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

$table->timestamps();

});

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\OrderController;

Route::get('google-bar-chart', [OrderController::class, 'index']);

use App\Http\Controllers\OrderController;

Route::get('google-bar-chart', [OrderController::class, 'index']);

Create Controller

Now, lets create a controller named OrderController using command given below –

php artisan make:controller OrderController

1	php artisan make:controller OrderController

Then go to app/http/controller folder and open OrderController.php. And put the following code into your OrderController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Order;
 
class OrderController extends Controller
{
    public function index()
    {
       $orders = Order::all();
       return view('google-bar-chart',['orders' => $orders]);   
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Order;

class OrderController extends Controller

{

public function index()

{

$orders = Order::all();

return view('google-bar-chart',['orders' => $orders]);

}

Create Blade File

In this step we will create blade file. Go to /resources/views/ folder and create one blade view file name google-bar-chart.blade.php. And add the following code into your google-bar-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 9 Google Bar Chart Example Tutorial</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">
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
</head>
  <body>
    <h2 style="text-align: center;">Laravel 9 Google Bar Charts Example Tutorial</h2>
    <div class="container-fluid p-5">
    <div id="barchart_material" style="width: 100%; height: 500px;"></div>
    </div>
 
    <script type="text/javascript">
 
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
 
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Order Id', 'Price', 'Product Name'],
 
            @php
              foreach($orders as $order) {
                  echo "['".$order->id."', ".$order->price.", ".$order->Product_name."],";
              }
            @endphp
        ]);
 
        var options = {
          chart: {
            title: 'Bar Graph | Price',
            subtitle: 'Price, and Product Name: @php echo $orders[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>

<!doctype html>

<head>

<title>Laravel 9 Google Bar Chart Example Tutorial</title>

</head>

<body>

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

</div>

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Order Id', 'Price', 'Product Name'],

@php

foreach($orders as $order) {

echo "['".$order->id."', ".$order->price.", ".$order->Product_name."],";

}

@endphp

]);

var options = {

chart: {

title: 'Bar Graph | Price',

subtitle: 'Price, and Product Name: @php echo $orders[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>

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/google-bar-chart

1	http://localhost:8000/google-bar-chart

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 9 Google Bar Chart Tutorial Example