Laravel 10/9 Google Line Chart Example

Laravel 10/9 google line graph chart example; Through this tutorial, i am going to show you how to implement google line graph chart in Laravel 10/9 apps.

Laravel 10/9 Google Line Chart Example

Follow the below given steps to implement google line chart in Laravel 10/9 apps:

Step 1: Install Laravel 10/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 10/9 App

Run below command to download or install fresh laravel setup into your machine for creating a Laravel 10/9 google line graph chart app:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Connecting App to Database

Go to Laravel 10/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

Go 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

Run the following command on command prompt to create a controller named GoogleLineController.php:

php artisan make:controller GoogleLineController

Then Go 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

Go 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/9 Google Line Graph Chart - Laratutorials.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/9 Google Line Chart | Laratutorials.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

Run PHP artisan serve command on terminal to start development server for Laravel 10/9 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

Conclusion

In this tutorial, you have learned how to implement dynamic google line chart in Laravel 10/9 apps.

Laravel 10/9 Google Line Chart Example