Laravel Google Bar Chart Example Tutorial

Google bar chart in laravel 9 apps; In this tutorial, we will learn how to implement google bar chart in laravel 9 app.

As well as how to display dynamic data on google bar charts in laravel 9. And also we will learn how to fetch month-wise data and display month-wise data in google bar chart for analytics in laravel 9 app.

Laravel Google Bar Chart Example Tutorial

Use the following steps to implement google bar chart in laravel 9 apps:

  • 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, we need to run below command to download or install fresh laravel setup into machine for creating a laravel google bar chart app. So open terminal and run the following command:

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

Step 2: Add Database Configuration

In this step, we need to navigate 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, we need to run the below command to create model and migration file. So open 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 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 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 web.php file:

use App\Http\Controllers\OrderController;

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

Step 5: Create Controller

In this step, open 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 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 google-bar-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 9 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 9 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, we need to run the following PHP artisan serve command to start laravel google bar chart app:

php artisan serve

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

php artisan serve --port=8080  

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

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

Recommended Laravel Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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