Today, we will see laravel 8 google bar chart example, Google charts is use to visualize data on your website here we will see bar chart example or google bar chart example in laravel. Bar charts also used for compare changes over the same period of time for more than one group.
So, here we will learn how to use google bar chart in laravel. Here i have added few step of google bar chart example in 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
Install new project for Google Bar Chart Example
composer create-project --prefer-dist laravel/laravel google_barchartIn this example we are getting dynamic data for pie charts so first, we need to create migration for "product" table using artisan command,
php artisan make:migration create_products_table --create=productsAfter that, you will find php file in this location "database/migrations/" in this file you need to add 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 following command in our terminal:
php artisan migrateNow add route in Routes/web.php
use App\Http\Controllers\Admin\BarchartController;
Route::get('barchart', [BarchartController::class,'barchart']);Now, create controller and model for google barchart example.
php artisan make:controller BarchartControllerphp 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'));
}
}Now, create blade file for view output of bar chart.
barchart.blade.php.
<html>
<head>
<title>Laravel 8 Google Bar Chart Example - websolutionstuff.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 - websolutionstuff.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>
