Laravel 10 Google Dynamic Pie Chart Tutorial

If you have developed a personal website or a social media engagement website and wish to display the data from these websites in the form of a visually appealing pie chart, this tutorial is specifically designed for you. By following this tutorial, you will learn how to create a dynamic pie chart using the Google Chart JS library in Laravel 10 applications.

How To Create Dynamic Google Pie Chart In Laravel 10

By following these tutorial steps, you can integrate the Google Chart JS library into your Laravel 10 application and create a dynamic pie chart to visualize data from your personal or social media engagement or any other websites.

Step 1: Set up a New Laravel Project
Step 2: Configure Database to Laravel App
Step 3: Define Routes
Step 4: Create a Controller
Step 5: Create Blade File for Pie Chart
Step 6: Import Google Chart Library in Blade View
Step 7: Run Development Server

Step 1: Set up a New Laravel Project

In this step, Open your terminal or command prompt(cmd).

Then you need to execute the following command into it to download or install fresh laravel setup in your server:

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

Step 2: Configure Database to Laravel App

Once you have installed Laravel app on your server. Then you need to navigate your laravel project root directory. And open .env file. Then add database detail like the 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: Define Routes

In this step, navigate 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 a Controller

In this step, open your 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 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 for Pie Chart

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

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 10 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 10 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 you want to make it 3d. You can set it to true.

Step 6: Import Google Chart Library in Blade View

In this step, you need to add the following Google Charts library to your Blade View file, created in the previous step:

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

Step 7: Run Development Server

Finally, you need to execute 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

By following this tutorial, you will successfully integrate the Google Chart JS library into your Laravel 10 application and create a dynamic pie chart to visualize data from your personal or social media engagement websites. Customize the data retrieval logic in the getChartData method to match your specific requirements and adjust the chart options to suit your visualization needs. For further information and advanced chart configurations.

You can see a live demo of laravel google pie chart here:

Live Demo

Subscribe to Blog via Email