Laravel 11 Google Pie Chart Example

Laravel 11 dynamic google pie chart; Through this tutorial, i am going to show you how to implement google pie chart in Laravel 11 apps.

Laravel 11 Dynamic Google Pie Chart Example

Use the below given steps to make dynamic google pie chart in Laravel 11 apps:

Step 1: Install Laravel 11 App
Step 2: Database Configuration
Step 3: Create Routes
Step 4: Create Controller
Step 5: Create Blade File
Step 6: Add Google Chart Library
Step 7: Run Development Server

Step 1: Install Laravel 11 App

Run the following command on command prompt to download or install fresh laravel setup into your machine for creating a laravel google pie chart app:

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

Step 2: Database Configuration

Visit to downloaded laravel dynamic google pie chart app root directory. And open .env file. Then add database detail like below:

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 Routes

Go to the routes folder and open web.php file. Then add the following route into your web.php file:

use App\Http\Controllers\GooglePieController;

Route::get('laravel-google-pie-chart', [GooglePieController::class, 'index']);

Step 4: Create Controller

Run the following command on command prompt to create a controller named GooglePieController.php:

php artisan make:controller GooglePieController

Then Navigate to app/http/controller folder and open GooglePieController.php. And add the following code into your GooglePieController.php file:

<?php
  
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
Use DB;
use Carbon\Carbon;
class GooglePieController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
          $data['pieChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"))
        ->whereYear('created_at', date('Y'))
        ->groupBy('month_name')
        ->orderBy('count')
        ->get();
    }
}

Step 5: Create Blade File

Go to /resources/views/ folder and create one blade view file name google-pie-chart.blade.php. And add the following code into your google-pie-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 11 Google Pie Chart - Laratutorials.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container p-5">
        <h5>Laravel 11 Google Pie Chart | Laratutorials.com</h5>
        <div id="piechart" style="width: 900px; height: 500px;"></div>
    </div>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Month Name', 'Registered User Count'],
                @php
                foreach($pieChart as $d) {
                    echo "['".$d->month_name."', ".$d->count."],";
                }
                @endphp
        ]);
          var options = {
            title: 'Users Detail',
            is3D: false,
          };
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
          chart.draw(data, options);
        }
      </script>
</body>
</html>

is3D is false by default, if you want to make it 3d. You can set it to true.

Step 6: Add Google Chart Library

To add the following google chart library in your blade view file:

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Step 7: Run Development Server

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

Now, you are ready to run laravel dynamic google pie chart app. So open your browser and hit the following URL into your browser:

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

Conclusion

Laravel 11 google pie chart tutorial, you have learned how to implement dynamic google pie chart in laravel app.