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.
