Laravel 9 Google Pie Chart Tutorial

Laravel 9 dynamic google pie chart; In this tutorial, we will learn how to implement google pie chart in laravel 9 app.

Google Charts provides a perfect way to visualize data on website. And also can display dynamic data day-wise, month-wise, year-wise on google pie chart in laravel.

Laravel 9 Google Pie Chart Tutorial

Follow the following steps to make a google pie chart in laravel 9 apps:

  • Step 1: Install Laravel 9 App
  • Step 2: Connecting App to Database
  • Step 3: Make 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

In this step, we need to run the below command to download or install a fresh laravel setup into machine for creating a laravel google pie chart app. So open terminal and run the following command:

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

Step 2: Connecting App to Database

In this step, we need to navigate laravel dynamic google pie chart app project 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: Make Routes

In this step, navigate to the routes folder and open the web.php file. Then add the following route into web.php file:

use App\Http\Controllers\GooglePieController;

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

Step 4: Create Controller

In this step, open terminal again and run the following command 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 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

In this step, navigate to /resources/views/ folder and create one blade view file name google-pie-chart.blade.php. And add the following code into google-pie-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 9 Google Pie Chart - Tutsmake.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 | Tutsmake.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 want to make it 3d. Can set it to true.

Step 6: Add Google Chart Library

In this step, need to add the following google chart library in blade view file:

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

Step 7: Run Development Server

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

php artisan serve

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

php artisan serve --port=8080  

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

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

Conclusion

Laravel google pie chart tutorial from scratch, we have learned how to implement dynamic google pie chart in laravel app.

Recommended Laravel Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *