How to Create Google Charts in Laravel 9 Tutorial Example ?

Today now in this post , I will show you an example of how to work laravel 9 google charts. So here I will explained this very simply about the dynamic google charts in laravel 9 application. Now this article is goes in details about how to use google charts in laravel 9 application. Do you have any question about the how to add google in laravel 9 application then here I will give a very simple example also with a solution. Alright, let’s start and follow the steps.

We can simply use the Line Charts, Bar Charts, Pie Charts, Area Charts, etc by using the google chart library js.

Now in this example, i will create a line chart with all months of current years. so let’s start and follow the below step and then add a chart in your own laravel 9 application.

Step 1: Install Laravel 9

This is first step but this step is optional; however, if you do not have then need to created the laravel app. then you may go ahead and then execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Route

Then at first of all i will create the simple route for creating the simple line chart. So let’s need to add simple routes as like as 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']);

Step 3: Create Controller

Now here, i will create a new controller as GoogleChartController. So let’s add the 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;
  
class GoogleChartController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        $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:

Now in the last step, i have to create the blade file and in this blade file i will use google js and also use their code.

resources/views/chart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Google Chart Example - codingspoint.com</title>
</head>
     
<body>
    <h1>Laravel 9 Google Chart Example - codingspoint.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>
Run Laravel App:

That’s good all the required steps have been complete, now we have to type the given below command and hit the enter to run the Laravel app:

php artisan serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →