Let's look at an example post using a Google chart in Laravel. Laravel will teach you about dynamic charts. Google Pie Chart with Laravel will be used. You'll find a straightforward example of a Google line chart in this post. Let's make a Google chart example in Laravel by following a few simple steps.

In versions of the application written in Laravel 6, Laravel 7, Laravel 8, and Laravel 9, we can easily make a Google chart.

Google has a number of well-known APIs these days, like map, chart, analytics, etc. The renowned Google Charts JS API is also very easy to integrate into our applications or projects. I'll show you how to use a Google line chart in your Laravel application with an example in this post.

Other charts, such as bar charts, area charts, column charts, pie charts, and GEO charts, are available through Google Charts Js. Line charts will be used in this post in a good graphical style. You just need to follow a few steps and you can use it in your Laravel application to receive the output seen in the preview below.

Step 1: Install Laravel

First things first, open a terminal window or command prompt and enter the following command to create a brand-new Laravel application:

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

Step 2: Create Migration and Model

We need to make a new table called "visitors" so that we can get data from it. You can make your own table instead, but this is just an example. Using the Laravel 5 php artisan command, we need to make a migration for the visitors table. To start, run the following line:

php artisan make:migration create_visitor_table

Following this command, you will find a file in the database/migrations folder. You must add the following code to your migration file in order to establish a visitors table.

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateVisitorTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('visitors', function (Blueprint $table) {
            $table->id();
            $table->integer('click');
            $table->integer('viewer');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('visitor');
    }
}

Let's create a model by using the command below:

php artisan make:model Visitor

app/Http/Controllers/HomeController.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Visitor extends Model
{
    use HasFactory;
}

Step 3: Add Route

We must include the route in this stage in order to generate the view. thus add the following route by opening your route file.

routes/web.php

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

Step 4: Create Controller

If you don't already have a HomeController, we recommend creating one in the file app/Http/Controllers/HomeController.php. Ensure that your visitor table contains some data. The following information should be included in the controller file because it will manage data, chart data, and view files:

app/Http/Controllers/HomeController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Visitor;
use DB;
  
class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function googleLineChart()
    {
        $visitor = Visitor::select(
                        DB::raw("year(created_at) as year"),
                        DB::raw("SUM(click) as total_click"),
                        DB::raw("SUM(viewer) as total_viewer")) 
                    ->orderBy(DB::raw("YEAR(created_at)"))
                    ->groupBy(DB::raw("YEAR(created_at)"))
                    ->get();
  
        $result[] = ['Year','Click','Viewer'];
        foreach ($visitor as $key => $value) {
            $result[++$key] = [$value->year, (int)$value->total_click, (int)$value->total_viewer];
        }
  
        return view('google-line-chart')
                ->with('visitor',json_encode($result));
    }
}

Step 5: Create View File

The last step is to build the view file "google-line-chart.blade.php" in order to generate the view chart. To do this, create the file and add the following code:

resources/view/google-line-chart.blade.php

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      var visitor = <?php echo $visitor; ?>;
      console.log(visitor);
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(visitor);
        var options = {
          title: 'Site Visitor Line Chart',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('linechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <h1>Laravel Google Chart Example - CodeSolutionstuff.com</h1>
    <div id="linechart" style="width: 900px; height: 500px"></div>
  </body>
</html>

You may now go and check.