Laravel 8 google line graph chart example tutorial from scratch; this tutorial will show you how to implement google line graph chart in laravel 8 app.
Google Charts provides a perfect way to visualize data on your web app. And also you can display dynamic data day wise, month wise, year wise on google line graph chart in laravel.
This line chart in laravel 8 tutorial will show you step by step on how to implement google line graph chart in laravel 8 app. And as well as, how to fetch current year month-wise data and display it on google line graph chart in laravel app.
Laravel 8 Google Line Graph Charts Example
- Step 1: Install Laravel 8 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 8 App
Open terminal and execute below command to download or install fresh laravel setup into your machine for creating a laravel 8 google line graph chart app:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Connecting App to Database
In this step, Navigate laravel 8 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 your 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 your 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 your google-line-chart.blade.php file:
<!doctype html>
<html lang="en">
<head>
<title>Laravel 8 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 8 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 8 dynamic google line chart app:
php artisan serve
Then, open your browser and hit the following URL into your browser:
http://localhost:8000/laravel-google-line-chart
Live Demo
Checkout Live demo:
Conclusion
In this tutorial, you have learned how to implement dynamic google line chart in laravel 8 app.
