Laravel 8 Google Bar Chart Example

Websolutionstuff | Jul-23-2021 | Categories : Laravel

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

 

Step 1: Install Laravel 8 for Google Bar Chart Example

Install new project for Google Bar Chart Example

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

 

 Step 2 : Create Migration for Google Charts Example

In 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=products

After 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 migrate

 

Step 3: Add Route

Now add route in Routes/web.php 

use App\Http\Controllers\Admin\BarchartController;

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

 

 

Step 4 : Create Controller and Model for Google Bar Chart Example in Laravel

Now, create controller and model for google barchart example.

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

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>

 

Recommended Post
Featured Post
Laravel 9 Flash Message Example
Laravel 9 Flash Message Exampl...

In this article, we will see a laravel 9 flash message example. Here, we will learn how to create or implement flash mes...

Read More

Dec-27-2022

Laravel 9 Cron Job Task Scheduling Tutorial
Laravel 9 Cron Job Task Schedu...

In this article, we will see laravel 9 cron job task scheduling tutorial, many times we require to run some piece o...

Read More

Mar-17-2022

How To Solve The Page Expired 419 Error In Laravel
How To Solve The Page Expired...

In this article, we will see how to fix 419 page expired in laravel. Many times we faced “The page has e...

Read More

Jun-28-2020

Laravel 8 Eloquent orWhereHas Condition
Laravel 8 Eloquent orWhereHas...

In this example we will see laravel 8 eloquent orWhereHas() condition. In previous example we will learn about ...

Read More

Oct-15-2021