Real Programmer
laravel 9

Laravel 9 Google Line Chart

2 Mins Read
Pinterest LinkedIn Tumblr

In this laravel tutorial, we will learn Google Line Chart

First of all, you need to follow this step.


Step 1: Install laravel App
Step 2: Database Configuration in .env file
Step 3: Configure route
Step 4: Create Controller
Step 5: Create blade
Step 6: Run Development Server

Step 1: Install laravel 9 App

We need to run command to create Laravel 9 projects.

composer create-project --prefer-dist laravel/laravel google_line_chart
cd google_line_chart

Step 2 : Connecting App to Database

Next step, we will set the database credentials in the application. Let’s open your project .env file and set the database credentials here.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=google_line_chart
DB_USERNAME=root
DB_PASSWORD=root@123

Step 3: Make Routes

In this step, navigate to the routes folder and open web.php file. put your route into web.php file:

<?php

use App\Http\Controllers\GoogleLineController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Route::get('laravel-google-line', [GoogleLineController::class, 'index']);

Step 3: Now create controller and routes

php artisan make:controller GoogleLineController

Add Code Logic In Controller

app/Http/Controllers/GoogleLineController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
Use DB;
 
use App\Models\User;
 
use Carbon\Carbon;
 
class GoogleLineController extends Controller
{
    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', $data);
    }
}

Create View Files

resources/views/google-layout.blade.php

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 9 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 9 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>

Run server,

php artisan serve
http://127.0.0.1:8000/laravel-google-line

Related Posts

Write A Comment