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

Read Also : Laravel 8 QR Code Generate Example

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>

Read Also : Multi Step Form Example In Laravel

Tags : Laravel Charts Bar Chart Laravel 8 Google Chart