Laravel 9 Google Pie Chart Example

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

Laravel 9 Dynamic Google Pie Chart Example

Use the below given steps to make dynamic google pie chart in laravel 9 apps:

  • Step 1: Install Laravel 9 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 9 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 9 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 9 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 9 google pie chart tutorial, you have learned how to implement dynamic google pie chart in laravel app.

Recommended Laravel Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.