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

Related Posts