In this tutorial you will learn about the Laravel 8 Google Line Chart Tutorial Example and its application with practical example.
In this Laravel 8 Google Line Chart Tutorial Example I’ll will show how to use google line chart in laravel application. In this tutorial you will learn to implement google line char in laravel 8 project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google line graph chart in laravel.
Laravel 8 Google Line Chart Tutorial Example
In this step by step tutorial I will demonstrate you how to create google line chart in laravel 8 application. Please follow the instruction given below:
- 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
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: Connecting App to Database
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: Make Routes
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 2 |
use App\Http\Controllers\GoogleLineController; Route::get('laravel-google-line-chart', [GoogleLineController::class, 'index']); |
Step 4: Create Controller
Now, lets create a controller named GoogleLineController using command given below –
1 |
php artisan make:controller GoogleLineController |
Now, go to app/http/controller folder and open GoogleLineController.php. And add the following code into your GoogleLineController.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 |
<?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 we will create blade view file. Go to /resources/views/ folder and create one blade view file name google-line-chart.blade.php. And put the following code into your google-line-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 46 47 |
<!doctype html> <html lang="en"> <head> <title>Laravel 8 Google Line Graph 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 8 Google Line Chart</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 we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
1 |
http://localhost:8000/laravel-google-line-chart |