Laravel 8 Google Pie Chart Example

Websolutionstuff | Mar-03-2021 | Categories : Laravel PHP jQuery

This article will show the laravel 8 google pie chart example. Google charts use to visualize data on your website. Here, we will see a pie chart example in laravel. 

A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. Here we will see how to use google pie chart in laravel, 

Here I have added a few steps of a dynamic google pie chart In laravel 8.

Step 1: Install Laravel

Step 2: Create a Migration

Step 3: Add Route

Step 4: Create Controller and Model

Step 5: Create Blade File


Step 1: Install Laravel 8

Install a new project in your laravel application for laravel 8 google pie chart example.

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


 Step 2: Create a Migration Table

We are getting dynamic data for the piechart example. So first, we need to create a migration for the "product" table using the laravel php artisan command. So, first type the below command for:

php artisan make:migration create_products_table --create=products

After running this command you will find php file in this location "database/migrations/" in this file you need to add the below code for the google pie chart In laravel 8.


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) {
    public function down()

 after this we need to run this migration by following the command in our terminal:

php artisan migrate

And after migration, you need to add some records as per the below screen print.


Step 3: Add Route

Now add a route in Routes/web.php 

Route::get('piechart', 'PiechartController@piechart');



 Step 4: Create Controller And Model

After adding the route we need to create a new controller and model for the google piechart example. So, type the below command in your terminal to create a controller.

php artisan make:controller PiechartController
php artisan make:model Product

Now add the below code in your PiechartController.


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\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 Blade File

In last we are creating a blade file to view the output of the pie chart example in laravel. So, copy the below code in your piechart.blade.php file.

    <title>Laravel 8 Google Pie Chart Example -</title>
    <script type="text/javascript" src=""></script> 
    <h2 style="margin:50px 0px 0px 0px;text-align: center;">Laravel 8 Google Pie Chart Tutorial -</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']});
        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.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);





You might also like:

Recommended Post
Featured Post
How To Install Python In Windows
How To Install Python In Windo...

In this article, how to install python on windows. Python is a high-level, interpreted, general-purpose programming...

Read More


Laravel 11 CKEditor Image Upload Example
Laravel 11 CKEditor Image Uplo...

Hello, laravel web developers! In this article, we'll see how to image upload in CKeditor 5 in laravel 11....

Read More


How To Use Sweetalert2 In Laravel
How To Use Sweetalert2 In Lara...

Today we will learn how to use sweetalert2 In laravel, You can use sweetalert2 in laravel as well as php, ...

Read More


How To Import Large CSV File In Database Using Laravel 9
How To Import Large CSV File I...

In this article, we will see how to import a large CSV file into the database using laravel 9. Here, we will learn&...

Read More