Hello Devs, 

In this tutorial we will see how to create google pie chart in laravel application.

Given below is full example for laravel google pie chart tutorial example,



Step 1 : 

Install Laravel App

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



Step 2 : 

Setup Database Configuration

open ".env" file and change the database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password



Step 3:

Create Table Migration and Model

php artisan make:model Student -m

/database/migrations/2020_06_25_100722_create_students_table.php

<?php

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

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('course');
            $table->timestamps();
        });
    }

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


Run this command:

php artisan migrate


app/Student.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    protected $fillable = ['name','course'];
}



Step 4 : 

Create Route

routes/web.php

Route::get('google-pie-chart', 'StudentController@googlePieChart');



Step 5 : 

Create Controller

create new controller as StudentController.

php artisan make:controller StudentController

app/http/controller/StudentController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class StudentController extends Controller
{
    public function googlePieChart()
    {
        $data = DB::table('students')
           ->select(
            DB::raw('course as course'),
            DB::raw('count(*) as number'))
           ->groupBy('course')
           ->get();
        $array[] = ['Course', 'Number'];
        foreach($data as $key => $value)
        {
          $array[++$key] = [$value->course, $value->number];
        }
        return view('google-pie-chart')->with('course', json_encode($array));
    }
}



Step 6 : 

Create Blade File 

/resources/views/googlePieChart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel google pie chart tutorial example - rathorji.in</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <style type="text/css">
        .box{
            width:800px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Laravel Google Pie Chart Tutorial Example - Rathorji.in</h3>
                    </div>
                    <div class="panel-body" align="center">
                        <div id="pie_chart" style="width:750px; height:450px;">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var analytics = <?php echo $course; ?>

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart()
        {
            var data = google.visualization.arrayToDataTable(analytics);
            var options = {
                title : 'Percentage of Students Courses(BCA,BCOM,BSC)'
            };
            var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data, options);
        }
    </script>
</body>
</html>

Run this command:

php artisan serve


Open this URL on browser:

http://localhost:8000/google-pie-chart


I hope this example helps you.