Laravel 9 Dynamic Google Pie Chart Example Tutorial

Throughout Laravel 9 dynamic google pie chart example; In this tutorial we will show you step by step guide on how to add google pie chart in laravel 9 app dynamically.

Google Charts offer you the easy method to display data to users effectively; consequently, Google Chart js makes data representation task less complicated. Using google chart we can display dynamic data day-wise, month-wise, year-wise on google pie chart in laravel.

This tutorial gives you a facile example of dynamic Google pie Chart in Laravel using Google charts JS API. You can implement this google piet chart example in your laravel 5, laravel 6, laravel 7, laravel 8 or laravel 9 apps.

Dynamic Google Pie Charts In Laravel 9

  • Step 1: Download Laravel 9 App
  • Step 2: Connect App to Database
  • Step 3: Generate Model & Migration File
  • Step 4: Make routes
  • Step 5: Create Controller
  • Step 6: Create Blade File
  • Step 7: Add Dummy records
  • Step 8: Run Development Server

Download Laravel App

Open the command prompt and execute the given below command to create a laravel application. Skip this step if the app is already installed.

composer create-project --prefer-dist laravel/laravel google-pie-chart

Go inside the app:

cd google-pie-chart

Connect App to Database

You need to include the database credentials such as database name, username, and password in .env file.

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

Generate Model & Migration

To display data into the line chart we require to create a “students” table.

Execute the command to create a model.

php artisan make:model Student -m

Open database/migrations/2020_06_25_100722_create_students_table.php file and include the following code.

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

Execute the command to run the migration:

php artisan migrate

Add the following table properties in app/Models/Student.php file.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

Make Routes

Route is required to access the chart view, open the routes/web.php file and add the given below code.

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

Create Controler

For displaying the data we need controller it will fetch the data from the database and show in Google chart. Generate controller using below command:

php artisan make:controller StudentController

Add the following code in app/Http/Controllers/StudentController.php file.

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

Create Blade File

Apparently, we have reached the final step. In this step, we have to generate a home.blade.php file and implied throughly the following code to evoke the view and show the line chart example in the Laravel application.

Add the code in the resources/view/google-pie-chart.blade.php file.

<!DOCTYPE html>
<html>
<head>
    <title>laravel google pie chart tutorial example</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</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>

Add Dummy Records for Testing

To display dynamic records in Line Chart is only possible if we have some records in the database. So, run the SQL query through PHPMyAdmin to add fake records.

INSERT INTO `students` (`id`, `name`, `course`, `created_at`, `updated_at`) VALUES
(1, test1, BCA, '2022-09-12 00:00:00', NULL),
(3, test2, MCA, '2022-08-31 00:00:00', NULL),
(2, test3, BSC, '2022-07-14 00:00:00', NULL),
(4, test4, BCA, '2022-06-13 00:00:00', NULL),
(5, test5, BCA, '2022-05-19 00:00:00', NULL),
(6, test6, BSC, '2022-04-26 00:00:00', NULL),
(7, test7, BCA, '2022-03-22 00:00:00', NULL),
(8, test8, MCA, '2022-02-18 00:00:00', NULL);

Run Development Server

Finally, you need to run the following PHP artisan serve command to start your laravel dynamic google pie chart app:

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080  

Consequently, check the google chart implementation in Laravel project:

On this URL you can open the line chart view:

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

We have seen how easy it is to integrate Google Charts in Laravel application dynamically. However, we have implemented the pie chart by following the same pattern; you can try your hands on other charts as well.

Leave a Comment