Laravel 9 Google Bar Chart Tutorial with Example

by

Throughout Laravel 9 google bar chart tutorial we will learn how to implement google bar chart in laravel 9 or 8 app. Google has provide us different type of Google chart with static data view. For displaying dynamic data on google bar chart in laravel application.

We can show the data according month, days, year wise in google bar chart for analytics in laravel 8 app. This tutorial will completely guide you from scratch on how to implement google bar chart in laravel 9 app.

Google Bar Chart in Laravel 9 App

Follow the following step by step guide to implement Google bar chart in laravel appliation.

  • Step 1: Download Laravel App
  • Step 2: Add Database Details
  • Step 3: Generate Model & Migration File
  • Step 4: Add Route
  • Step 5: Create Controller
  • Step 6: Setup Blade File
  • Step 7: Run Development Server

Step 1: Download Laravel App

First we need to install a new fresh laravel app. So download it by the following command.

composer create-project --prefer-dist laravel/laravel google-chart

Step 2: Add Database Credentials

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 File

In this step, you need to run the below command to create model and migration file. So open your terminal and run the following command:

php artisan make:model Order -m

Then navigate to app directory and open App/Models/Order.php file and add the following code on it:

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

After that navigate 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();
});

Then open your terminal and run the following command:

php artisan migrate

Step 4: Add Route

In this step, navigate to routes folder and open web.php file add the following route on it:

use App\Http\Controllers\OrderController;

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

Step 5: Create Controller

In this step, open your terminal again and run the following command to create controller named OrderController.php:

php artisan make:controller OrderController

Then Navigate to app/http/controller folder and open OrderController.php. And add 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]);   
    }
}

Step 6: Setup Blade File

In this step, create a blade view file name google-bar-chart.blade.php and add the following code on it:

<html lang="en">
  <head>
    <title>Laravel 9 Google Bar Chart Example Tutorial - codingdriver.com</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 - codingdriver.com</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>

Step 7: Run Development Server

Finally, you need to run the following PHP artisan serve command to start your laravel google bar chart app:

php artisan serve

Now, open browser and hit the following URL into your browser:

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

I hope you enjoy with laravel google bar chart example.

Leave a Comment