
Hello friends, Today we will show Laravel 8 Google Bar Chart Example. In this example we will discuss on about of Google Bar Chart in Laravel 8. We will explain how to Implement Google Bar Chart in laravel 8 application.
In this post you learn how to display dynamic data on google bar charts in laravel 8. Also we explain step by step how to fetch month-wise data and display data in google bar chart for analytics in laravel 8 application. In this example we will share with you how to integrate google bar chart in laravel 8.
Laravel 8 Google Bar Chart Example From Scratch
Now we will show example of dynamic google bar chart in laravel 8. So let’s following step by step code.
Step 1: Install Laravel 8 for Google Bar Chart Example
In this step we will install new project for Google Bar Chart Example. So enter the following command line in your terminal.
composer create-project --prefer-dist laravel/laravel google_barchart
Step 2 : Create Migration for Google Charts Example
php artisan make:migration create_products_table --create=products
<?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 bellow command in our terminal:
php artisan migrate
Step 3: Add Route
use App\Http\Controllers\Admin\BarchartController; Route::get('barchart', [BarchartController::class,'barchart']);
Step 4 : Create Controller and Model
php artisan make:controller BarchartController
php artisan make:model Product
<?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')); } }
Step 5 : Create Blade File for Google Bar Chart
Now, create blade file for view output of bar chart.
<html> <head> <title>Laravel 8 Google Bar Chart Example - web-tuts.com</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 - web-tuts.com</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>
I hope you understand of Laravel 8 Google Bar Chart and it can help you…