Laravel 7 google bar chart tutorial from scratch. Here, you will learn how to implement google bar chart in laravel app from scratch.
As well as how to display dynamic data on google bar charts in laravel.
And also you can fetch month-wise data and display month-wise data in google bar chart for analytics in laravel app.
This tutorial will help you on how to implement google bar chart in laravel from scratch.
Google Bar Chart in Laravel
Follow the below steps and implement google bar chart in laravel app:
- 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;
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
After that, navigate to database/factories folder and open OrderFactory.php file. And the following code into your OrderFactory.php file:
<?php
/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Order;
use Faker\Generator as Faker;
$factory->define(Order::class, function (Faker $faker) {
return [
"product_name" => $faker->word,
"product_id" => $faker->numberBetween(1,100),
"price" => $faker->numberBetween(1, 100),
];
});
Then open your terminal again, and run the following command to generate fake data into your database in laravel:
php artisan tinker //then factory(\App\Order::class,100)->create()
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:
Route::get("google-bar-chart", "OrderController@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\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 Google Bar Chart Example Tutorial</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 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, you are ready to run laravel google bar chart app. So open your browser and hit the following URL into your browser:
http://localhost:8000/google-bar-chart
Recommended Laravel Tutorial
- Laravel Tutorial From Scratch | Step By Step
- Laravel CRUD using Livewire Example
- Laravel Ajax CRUD(DataTables Js) Tutorial Example
- Upload Files/Images to Amazon s3 Cloud Using Laravel Filesystem
- Laravel Ajax CRUD (Operation) Application Example
- Laravel Angular JS CRUD Example Tutorial
- Ajax Image Upload In Laravel Tutorial Example From Scratch
- Laravel CKEditor with Image Upload
- Laravel Intervention Upload Image Using Ajax – Example
- Upload Image to Database with Validation in laravel
