Laravel 10 Google Charts Tutorial Example

By Hardik Savani April 20, 2024 Category : Laravel

Hi Artisan,

In this quick example, let's see laravel 10 google charts. Here you will learn dynamic google charts in laravel 10. we will help you to give an example of how to use google chart in laravel 10. you can understand a concept of how to add google in laravel 10. Let's see below example laravel 10 dynamic google charts example.

Google Charts is a web-based charting tool built on the Google Visualization API. It allows users to build a variety of charts, including line graphs, bar charts, area charts, scatter plots, pie charts, and more. The charts are highly customizable and can be integrated into websites and applications with ease.

In this example, we will create some dummy users records and then we will display a line chart with all months of current years. so let's follow the below step and add a chart in your laravel 10 app.

Step 1: Install Laravel 10

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Route

first of all we will create simple route for creating simple line chart. so let's add simple routes as like bellow:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\GoogleChartController;
  
/*
|--------------------------------------------------------------------------
| 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('chart', [GoogleChartController::class, 'index']);

Read Also: Laravel 10 CRUD Application Example Tutorial

Step 3: Create Controller

Here, we will create new controller as GoogleChartController. so let's add bellow code on that controller file.

app/Http/Controllers/GoogleChartController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
use DB;
use Illuminate\View\View;
  
class GoogleChartController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        $users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(DB::raw("Month(created_at)"))
                    ->pluck('count', 'month_name');
            
        return view('chart', compact('users'));
    }
}

Step 4: Create Blade File:

here, we need to create blade file and in this blade file we use google js and use their code.

resources/views/chart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Google Chart Example - ItSolutionStuff.com</title>
</head>
     
<body>
    <h1>Laravel 10 Google Chart Example - ItSolutionStuff.com</h1>
    <div id="google-line-chart" style="height: 500px"></div>
</body>
  
<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($users as $key => $value) {
                    echo "['".$key."', ".$value."],";
                }
            @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>
</html>

Step 5: Create Dummy Records:

Here, we need to add some dummy records on users table as monthly wise.

you can create dummy records using laravel tinker command as bellow:

php artisan tinker
User::factory()->count(30)->create()

You need to create users on each month with created date.

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

Read Also: Laravel 10 Highcharts Tutorial Example
http://localhost:8000/chart

Output:

I hope it can help you...

Tags :
Previous

Laravel 10 Fullcalendar Ajax Tutorial Example
Next

Laravel 10 Google Recaptcha V3 Example Tutorial

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares