In this tutorial you will learn about the Laravel Dynamic Google Pie Charts Example From Scratch and its application with practical example.
In this Laravel Google Pie Chart Example Tutorial I’ll will show how to use google Pie chart in laravel application. In this tutorial you will learn to implement google Pie chart in laravel 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.
Laravel Dynamic Google Pie Charts Example From Scratch
- Step 1: Install Laravel App
- Step 2: Add Database Details
- Step 3: Add Route
- Step 4: Create Controller
- Step 5: Create Blade File
- Step 6: Add Google Chart Library
- Step 7: Run Development Server
Step 1: Install Laravel App
First of all we need to create a fresh laravel project, download and install Laravel using the below command
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Add Database Detail
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.
1 2 3 4 5 6 |
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: Add Route
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
1 |
Route::get("laravel-google-pie-chart", "GooglePieController@index"); |
Step 4: Create Controller
Now, lets create a controller named GooglePieController using command given below –
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php namespace App\Http\Controllers; use App\User; use Illuminate\Http\Request; use Redirect,Response; 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, go to /resources/views/ folder and create a blade file name google-pie-chart.blade.php. And put the following code into your google-pie-chart.blade.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html lang="en"> <head> <title>Laravel 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 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> |
Step 6: Add Google Chart Library
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 –
1 2 3 4 5 |
php artisan serve If you want to run the project diffrent port so use this below command php artisan serve --port=8080 |
Now, open the following URL in browser to see the output –
1 |
http://localhost:8000/laravel-google-pie-chart |