Laravel 10 Google Bar Chart Example

Laravel 10 google bar chart; Through this tutorial, i am going to show you how to implement google bar chart in Laravel 10 apps.

Laravel 10 Google Bar Chart Example

Follow the below given steps to make google bar chart in Laravel 10 apps:

Step 1: Install Laravel 10 App
Step 2: Configure Database with App
Step 3: Generate Migration & Model File
Step 4: Add Route
Step 5: Create Controller
Step 6: Create Blade File
Step 7: Run Development Server

Step 1: Install Laravel 10 App

Run command to download or install fresh laravel setup into your machine for creating a laravel google bar chart app. So open your terminal and run the following command:

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

Step 2: Configure Database with App

Go to downloaded laravel google bar chart app project root directory. And open .env file. Then add database detail like below:

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: Generate Migration & Model File

Run the below command to create model and migration file. So open your terminal and run the following command:

php artisan make:model Order -fm

Then navigate to app directory and open Order.php file. And add 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 = [];
}

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

Go to routes folder and open web.php file. Then add the following route into your web.php file:

use App\Http\Controllers\OrderController;

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

Step 5: Create Controller

Run the following command on command prompt 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: 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 10 Google Bar Chart Example Tutorial - Laratutorials.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 10 Google Bar Charts Example Tutorial - Laratutorials.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

Run the following PHP artisan serve command to start your laravel google bar chart app:

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

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

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

Laravel 10 Google Bar Chart Example