Laravel 9 Google Line Graph Chart Example Tutorial

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 Google Chart Example Tutorial

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.

Subscribe to Blog via Email