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
Nice tutorial bro