Laravel 10/9 dynamic google pie chart; Through this tutorial, i am going to show you how to implement google pie chart in Laravel 10/9 apps.
Laravel 10/9 Dynamic Google Pie Chart Example
Use the below given steps to make dynamic google pie chart in Laravel 10/9 apps:
- Step 1: Install Laravel 10/9 App
- Step 2: Database Configuration
- Step 3: Create 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/9 App
Run the following command on command prompt to download or install fresh laravel setup into your machine for creating a laravel google pie chart app:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Database Configuration
Visit to downloaded laravel dynamic google pie chart app 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: Create Routes
Go 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
Run the following command on command prompt 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
Go 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/9 Google Pie Chart - Laratutorials.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/9 Google Pie Chart | Laratutorials.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
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
Run 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
Laravel 10/9 google pie chart tutorial, you have learned how to implement dynamic google pie chart in laravel app.
Be First to Comment