Google Bar Chart In Laravel 10

Google Bar Chart In Laravel 10

If you want to create a Google Bar Chart in your Laravel web application using the Google Chart library, this tutorial is designed to assist you. By following this tutorial, you will learn how to integrate the Google Chart library into your Laravel 10 app and create a bar chart.

Google Bar Chart In Laravel 10

By following these tutorial steps, you will be able to integrate Google Chart Library into your Laravel 10 app and create bar charts to visualize your data.

  • Step 1: Create New Laravel 10 Project
  • Step 2: Configure Database with Laravel App
  • Step 3: Create Migration & Model File
  • Step 4: Define Routes
  • Step 5: Create a Controller
  • Step 6: Create Blade File
  • Step 7: Run Development Server

Step 1: Create New Laravel 10 Project

First of all, Open your terminal or command prompt(cmd).

Then you need to execute the following command into it to download or install Laravel 10 new setup in your server:

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

Step 2: Configure Database with Laravel App

Once you have installed Laravel 10 apps on your server. Now you need to navigate Laravel project root directory. Then find & open .env file. And add database detail like the 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: Create 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: Define Routes

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

Conclusion

creating a Google Bar Chart in a Laravel app can be achieved by following the steps mentioned above. The process involves installing Laravel and add Google Charts library, creating a controller, defining a route, creating a view, and modifying the controller to return the view. By customizing the view and the controller, you can create a Google Bar Chart that fits the specific requirements of your application. With these steps, you can easily add data visualization features to your Laravel app using Google Charts.

Recommended Laravel Posts

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, 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 from a starting stage. As well as demo example.

Leave a Reply

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