Google Charts is a web-based charting tool built on the Google Visualization API. It allows users to build a variety of charts, including line graphs, bar charts, area charts, scatter plots, pie charts, and more.
Step 1: Install Laravel
composer create-project laravel/laravel example-app
Step 2: Create Route
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleChartController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('chart', [GoogleChartController::class, 'index']);
Step 3: Create Controller
app/Http/Controllers/GoogleChartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use DB;
use Illuminate\View\View;
class GoogleChartController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index(): View
{
$users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("Month(created_at)"))
->pluck('count', 'month_name');
return view('chart', compact('users'));
}
}
Step 4: Create Blade File:
resources/views/chart.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Google Chart Example - webthestuff.com</title>
</head>
<body>
<h1>Laravel 10 Google Chart Example - webthestuff.com</h1>
<div id="google-line-chart" style="height: 500px"></div>
</body>
<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($users as $key => $value) {
echo "['".$key."', ".$value."],";
}
@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>
</html>
Step 5: Create Dummy Records:
php artisan tinker
User::factory()->count(30)->create()
php artisan serve
Now, Go to web browser, type the URL and see the output:
http://localhost:8000/chart
