Laravel 8 Google Pie Chart Example

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

Today In this example we will see laravel 8 google pie chart example, google charts use to visualize data on your website here we will see pie chart example in laravel. 

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

Here i have added few step of dynamic google pie chart In laravel 8.

Step 1 : Install Laravel

Step 2 : Create Migration

Step 3 : Add Route

Step 4 : Create Controller and Model

Step 5 : Create Blade File

 

Step 1: Install Laravel 8

Install 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 Migration Table

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

php artisan make:migration create_products_table --create=products

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

<?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');
    }
}

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

php artisan migrate

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

 

Step 3: Add Route

Now add route in Routes/web.php 

Route::get('piechart', '[email protected]');

 

 

 Step 4 : Create Controller And Model

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

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

 

Now add below code in your PiechartController.

<?php

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 blade file for view output of pie chart example in laravel, So copy below code in your piechart.blade.php file.

<html>
<head>
    <title>Laravel 8 Google Pie Chart Example - websolutionstuff.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 Pie Chart Tutorial - websolutionstuff.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', '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);
        }
    </script>
</body>
</html>

 

After all impliment of these steps you will get output of laravel 8 google pie chart tutorial like below image.

laravel_8_google_pie_chart

 

Featured Post




Follow us
facebooklogo github instagram twitter