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', '[email protected]');



 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

Follow us
facebooklogo github instagram twitter