If you want to visualize your data by creating a Google Line Chart in your Laravel 10 application using Google’s ChartJS library, this tutorial is tailored to guide you through the process. In this tutorial, you will learn how to integrate the Google ChartJS library into your Laravel app and create a line graph chart.
How to Create Dynamic Google Line Charts In Laravel 10
By following the steps outlined in this tutorial, you will be able to integrate Google’s ChartJS library into your Laravel 10 application and create a line graph chart to visualize your data.
- Step 1: Create New Laravel 10 Project
- Step 2: Setup Database with Laravel App
- Step 3: Add Routes
- Step 4: Create a Controller
- Step 5: Create Blade File
- Step 6: Run Development Server
Step 1: Create New Laravel 10 Project
Firstly, Open your terminal or command prompt.
Then you need to execute following command into it to download or install fresh laravel setup in your server:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Setup Database with Laravel App
Once you have installed Laravel app on your server. Then you have to setup a database with your laravel app.
And then visit to the root directory of Laravel app. And open .env file. Then add database detail like the 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: Add 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 10 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 10 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 10 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
By following this tutorial, you will be able to integrate Google’s ChartJS library into your Laravel 10 application and create a line graph chart to visualize your data. Modify the data and options in the script block to fit your specific needs and display your own dataset. Refer to the Google ChartJS documentation for more details on available options and advanced chart configurations.
