Site Admin
Site Admin Founder of MeaningArticles
449 Views

Laravel 8 Google Bar Chart

Hello Dev.

Today, we are able to see laravel 8 google bar chart instance, Google charts is find to visualise statistics on your website right here we can see bar chart instance or google bar chart instance in laravel. Bar charts extensively utilized for examine modifications over the same period of time for more than one group.

So, right here we will learn how to use google bar chart in laravel. right here i've added few step of google bar chart example in laravel 8.


Step 1: Install Laravel Application

Install new project for Google Bar Chart Example

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


Step 2: Create Migration

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 on 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 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

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 - meaningarticles.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 - meaningarticles.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>

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.