Laravel 8 Dynamic Google Pie Charts Example

In this tutorial you will learn about the Laravel 8 Dynamic Google Pie Charts Example and its application with practical example.

In this Laravel 8 Dynamic Google Pie Charts Example Tutorial I’ll will show how to use google Pie chart in laravel 8 application. In this tutorial you will learn to implement google Pie chart in laravel 8 project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google Pie chart in laravel.

Table Of Contents−

Laravel 8 Dynamic Google Pie Charts Example

In this step by step tutorial I will demonstrate you how to create Dynamic Google Pie Charts in laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8 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 8 App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .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

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

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\GooglePieController;

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

use App\Http\Controllers\GooglePieController;

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

Step 4: Create Controller

Now, lets create a controller named GooglePieController using command given below –

php artisan make:controller GooglePieController

1	php artisan make:controller GooglePieController

Then go to app/http/controller folder and open GooglePieController.php. And put 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();
    }
 
}

<?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 we will create blade view file. Go to /resources/views/ folder and create one blade view file name google-pie-chart.blade.php. And put the following code into your google-pie-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 8 Google Pie Chart</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 8 Google Pie Chart</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>

<!doctype html>

<head>

<title>Laravel 8 Google Pie Chart</title>

</head>

<body>

<h5>Laravel 8 Google Pie Chart</h5>

</div>

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>

Step 6: Add Google Chart Library

Please remember to add google chart library.

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

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

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

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

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

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Dynamic Google Pie Charts Example