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

 

Step 1: Install Laravel 8 for Google Bar Chart Example

In this step, we will install laravel 8 using the below command.

composer create-project --prefer-dist laravel/laravel google_barchart

 

 

 Step 2: Create Migration For Google Charts Example

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

 

 

Step 3: Add Route

Now. add a route in the Routes/web.php file.

use App\Http\Controllers\Admin\BarchartController;

Route::get('barchart', [BarchartController::class,'barchart']);

 

Step 4: Create Controller And Model

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'));
    }
}

 

 

Step 5: Create Blade File

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:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS