Laravel 8 Google Bar Chart Tutorial Example

Laravel 8 Google Bar Chart Tutorial Example

Laravel 8 google bar chart tutorial. In this tutorial, we will show you how to implement google bar chart in laravel 8 app.

As well as how to display dynamic data on google bar charts in laravel 8. And also you will learn how to fetch month-wise data and display month-wise data 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 8 app.

Google Bar Chart in Laravel 8

  • Step 1: Install Laravel App
  • Step 2: Add Database Details
  • 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 App

In this step, you need to run below 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: Add Database Configuration

In this step, you need to navigate your 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

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 -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

In this step, navigate 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

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: Create Blade File

In this step, navigate 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 8 Google Bar Chart Example Tutorial - Tutsmake.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 8 Google Bar Charts Example Tutorial - Tutsmake.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

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *