Laravel Google Pie Chart Example

Laravel google pie chart example. In this post, I explain laravel google chart example. We will show dynamic google pie charts in laravel. In this post we simple use laravel google pie chart. We will explain step by step example of laravel google pie chart example.

We will learn example of google chart in laravel. You can simply add google chart in laravel 6, laravel 7 and laravel 8 apaplication.

In this tutorial, we learn example of Google pie chart. We will explain how to use dynamic google pie chart in laravel. Also, we learn laravel dynamic google pie chart example.

Dynamic Google Pie Charts In Laravel

Step 1: Install Laravel

In this step, we will install fresh laravel package for laravel google pie chart. 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 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 creating a laravel google pie chart app.. 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 Google Pie Chart Example

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