Laravel 8 Google Bar Chart Example
In this article, we will see laravel 8 google bar chart example. Google charts are used to visualize data on your website. here we will see a bar chart example or google bar chart example in laravel. Bar charts are also used to compare changes over the same period of time for more than one group.
So, let's see the google bar chart example in laravel 8, google charts example, how to use google bar chart in laravel 7/8, bar chart in laravel, and dynamic google bar chart In laravel 8, laravel 8 charts tutorial, google charts laravel 8.
Step 1: Install Laravel 8 for Google Bar Chart Example
Step 2: Create Migration for Google Charts Example
Step 3: Add Route
Step 4: Create Controller and Model For Google Bar Chart Example In Laravel
Step 5: Create Blade File
In this step, we will install laravel 8 using the below command.
composer create-project --prefer-dist laravel/laravel google_barchart
we are getting dynamic data for bar charts. So, we need to create migration for the "product" table using the artisan command.
php artisan make:migration create_products_table --create=products
After that, you will find a PHP file in this location "database/migrations/" in this file you need to add the below code.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->integer('price')->nullable();
$table->integer('year')->nullable();
$table->string('product_type')->nullable();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('products');
}
}
Now, run migration by the following command in our terminal:
php artisan migrate
Now. add a route in the Routes/web.php file.
use App\Http\Controllers\Admin\BarchartController;
Route::get('barchart', [BarchartController::class,'barchart']);
Now, create a controller and model using the below command.
php artisan make:controller BarchartController
php artisan make:model Product
Now, create a function and get the data from the database and pass it to the blade file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class BarchartController extends Controller
{
public function barchart(Request $request)
{
$phone_count_18 = Product::where('product_type','phone')->where('year','2018')->get()->count();
$phone_count_19 = Product::where('product_type','phone')->where('year','2019')->get()->count();
$phone_count_20 = Product::where('product_type','phone')->where('year','2020')->get()->count();
$laptop_count_18 = Product::where('product_type','laptop')->where('year','2018')->get()->count();
$laptop_count_19 = Product::where('product_type','laptop')->where('year','2019')->get()->count();
$laptop_count_20 = Product::where('product_type','laptop')->where('year','2020')->get()->count();
$tablet_count_18 = Product::where('product_type','tablet')->where('year','2018')->get()->count();
$tablet_count_19 = Product::where('product_type','tablet')->where('year','2019')->get()->count();
$tablet_count_20 = Product::where('product_type','tablet')->where('year','2020')->get()->count();
return view('barchart',compact('phone_count_18','phone_count_19','phone_count_20','laptop_count_18','laptop_count_19','laptop_count_20','tablet_count_18','tablet_count_19','tablet_count_20'));
}
}
Now, create a blade file to view the output of the bar chart.
barchart.blade.php.
<html>
<head>
<title>Laravel 8 Google Bar Chart Example - Techsolutionstuff</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h2 style="margin:50px 0px 0px 0px;text-align: center;">Laravel 8 Google Bar Chart Example - Techsolutionstuff</h2>
<div id="linechart" style="width: 900px; height: 500px; margin-left: 235px"></div>
<script type="text/javascript">
var phone_count_18 = <?php echo $phone_count_18; ?>;
var phone_count_19 = <?php echo $phone_count_19; ?>;
var phone_count_20 = <?php echo $phone_count_20; ?>;
var laptop_count_18 = <?php echo $laptop_count_18; ?>;
var laptop_count_19 = <?php echo $laptop_count_19; ?>;
var laptop_count_20 = <?php echo $laptop_count_20; ?>;
var tablet_count_18 = <?php echo $tablet_count_18; ?>;
var tablet_count_19 = <?php echo $tablet_count_19; ?>;
var tablet_count_20 = <?php echo $tablet_count_20; ?>;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Phone', 'Laptop', 'Tablet'],
['2018', phone_count_18, laptop_count_18, tablet_count_18],
['2019', phone_count_19, laptop_count_19, tablet_count_19],
['2020', phone_count_20, laptop_count_20, tablet_count_20]
]);
var options = {
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
</script>
</body>
</html>
You might also like:
- Read Also: Laravel REST API CRUD Tutorial
- Read Also: Google Line Chart Example in Laravel 8
- Read Also: How To Create Dynamic Pie Chart In Laravel
- Read Also: How To Create Dynamic Line Chart In Laravel
