Laravel 11 Google Line Chart Example

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

Laravel 11 Google Line Chart Example

Follow the below given steps to implement google line chart in Laravel 11 apps:

  • Step 1: Install Laravel 11 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 11 App

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

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

Step 2: Connecting App to Database

Go to Laravel 11 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 11 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 11 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 11 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 11 apps.

Recommended Laravel Tutorials

Leave a Comment