Laravel Dynamic Google Pie Chart Example

In this example, I explain Laravel Dynamic Google Pie Chart Example. We will explain how to use google pie chart in laravel. Google pie charts are use to representing data in graphics view, for creation of dynamic pie chart example. We will see laravel google pie chart example, google charts use to visualize data on your website here we will see pie chart example in laravel.

Example : Dynamic Pie Charts Using Google Charts API in Laravel

Step 1: Install Laravel

In this step, we will install fresh laravel package for laravel google dynamic pie charts. So let’s following command:

composer create-project --prefer-dist laravel/laravel google_piechart
Step 2 : Create Migration Table

In this step, We will create migration for laravel dynamic google pie chart. So let’s following command:

php artisan make:migration create_products_table --create=products
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    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();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Create migration after following command to create table.

php artisan migrate
Step 3: Add Route
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PiechartController;

Route::get('piechart', [PiechartController::class,'piechart']);

Step 4 : Create Controller

In this step, we will create PiechartController.php controller for laravel dynamic google pie chart. So let’s following command:

php artisan make:controller PiechartController
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product;

class PiechartController extends Controller
{
    public function piechart(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('piechart',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 Model

In this step, we will create model for dynamic google pie chart in laravel. So following command:

php artisan make:model Product
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
}

Step 6 : Create Blade File

In this step, we will create file for view dynamic google pie charts in laravel. So create piechart.blade.php file.

<html>
<head>
    <title>Laravel dynamic Google Pie Chart Example - web-tuts.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 dynamic Google Pie Chart Tutorial - web-tuts.com</h2>
    <div id="piechart" 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', 'Products'],
          ['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.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);
        }
    </script>
</body>
</html>

Laravel dynamic Google Pie Chart Example

I hope you understand laravel dynamic google pie chart example and it can help you…

Read Also :  How to get Random Value from Array in laravel