Google line graph chart in laravel 9; In this tutorial, we will learn how to implement google line graph chart in laravel 9 app.
Google Charts provides a perfect way to visualize data on web app. And also we can display dynamic data day wise, month wise, year wise on google line graph chart in laravel.
Laravel 9 Google Line Chart Tutorial Example
Use the following steps to make google line 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: Run Development Server
Step 1: Install Laravel 9 App
Open terminal and execute below command to download or install fresh laravel setup into machine for creating a laravel 9 google line graph chart app:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Connecting App to Database
In this step, Navigate laravel 9 dynamic google line graph 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 web.php file:
use App\Http\Controllers\GoogleLineController;
Route::get('laravel-google-line-chart', [GoogleLineController::class, 'index']);
Step 4: Create Controller
In this step, open the terminal and execute the following command to create a controller named GoogleLineController.php:
php artisan make:controller GoogleLineController
Then Navigate to app/http/controller folder and open GoogleLineController.php. And add the following code into GoogleLineController.php file:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
Use DB;
use App\Models\User;
use Carbon\Carbon;
class GoogleLineController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data['lineChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"),\DB::raw('max(created_at) as createdAt'))
->whereYear('created_at', date('Y'))
->groupBy('month_name')
->orderBy('createdAt')
->get();
return view('google-line-chart', $data);
}
}
Step 5: Create Blade File
In this step, navigate to /resources/views/ folder and create one blade view file name google-line-chart.blade.php. And add the following code into google-line-chart.blade.php file:
<!doctype html>
<html lang="en">
<head>
<title>Laravel 9 Google Line Graph 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 Line Chart | Tutsmake.com</h5>
<div id="google-line-chart" 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', 'Register Users Count'],
@php
foreach($lineChart as $d) {
echo "['".$d->month_name."', ".$d->count."],";
}
@endphp
]);
var options = {
title: 'Register Users Month Wise',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('google-line-chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Step 6: Run Development Server
Now, Execute PHP artisan serve command on terminal to start development server for laravel 9 dynamic google line chart app:
php artisan serve
Then, open browser and hit the following URL into browser:
http://localhost:8000/laravel-google-line-chart
Conclusion
In this tutorial, we have learned how to implement dynamic google line chart in laravel 9 app.
