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 orderBy, groupBy and limit Example
Laravel orderBy, groupBy and l...

In this article, we will see the laravel orderBy, groupBy, and limit examples. Here we will see different types of&...

Read More

Jan-27-2021

How To Get Multiple Checkbox Value In React JS
How To Get Multiple Checkbox V...

In this article, we will see how to get multiple checkbox values in react js. In react, js click on the submit butt...

Read More

Aug-29-2022

How To Block IP Address In Laravel 10
How To Block IP Address In Lar...

In this article, we will see how to block IP addresses in laravel 10. Here we will learn about how to restrict...

Read More

May-17-2023

How to Create Custom Login and Registration in Laravel 10
How to Create Custom Login and...

In the ever-evolving landscape of web development, crafting a tailor-made user authentication system stands as a pivotal...

Read More

Aug-25-2023