Laravel 10 dynamic google pie chart example; This tutorial will show you how to implement google pie chart in Laravel 10 app.
Google Charts provides a perfect way to visualize data on your website. And also you can display dynamic data day-wise, month-wise, year-wise on google pie chart in laravel.
This dynamic google pie chart in laravel tutoriaL will implement google pie chart in Laravel 10 app. And as well as, display last 30 days data on google pie chart in Laravel 10 app.
Dynamic Google Pie Charts In Laravel 10
- Step 1: Install Laravel 10 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 10 App
In this step, you need to run below command to download or install fresh laravel setup into your machine for creating a laravel google pie chart app. So open your terminal and run the following command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Connecting App to Database
In this step, you need to navigate your 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 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
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
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 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: Add Google Chart Library
In this step, you need 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
Finally, you need to run the following PHP artisan serve command to start your laravel dynamic google pie chart app:
php artisan serveIf 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
Live Demo
You can see live demo of laravel google pie chart here:
Conclusion
In this laravel google pie chart tutorial from scratch, you have learned how to implement dynamic google pie chart in laravel app.
