How to use Google Charts in Laravel 8?

In this article, You will learn dynamic charts in Larva 8. This tutorial will give you a simple example of using Google Chart in Larva 8. It's simple example of laravel 8 google line chart example. 

Today, Google has many popular APIs such as maps, charts, analytics, and more. The Google Chart JS API is also very popular and is very easy to integrate with our applications or projects. In this tutorial, we are going to give you an example of Google line chart, how to use Google line chart in your larva application.

Google Charts js offers many other charts such as bar charts, area charts, column charts, pie charts, GEO charts, and more. In this tutorial, we will use the line chart as a good graphical method. You can use it in your larva application, you just follow some steps.

So, let's follow some steps to make an example of larvae 8.

• Install Laravel
• Create Migration and Model
• Add Route
• Create Controller
• Create View File

Step 1: Install Laravel

First Step, you need to download or install laravel web application new setup on your local machine. you can use the following command to download or install laravel application new setup:

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

If you want to install a specific version of laravel, you can follow the following tutorial.

    https://w3alert.com/laravel-tutorial/laravel-install-on-windows-ubuntu-with-composer

Step 2: Create Migration and Model

In this step, you need to create new table "visitors" that way we will get data from this table, you can use your own table but this is for example. we have to create migration for visitors table by using the following command:

    php artisan make:migration create_visitors_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create 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 model using bellow command:

    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

Next step, Navigate to "routes/web.php" file and add the following routes into your web.php 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 haven't HomeController then we should create a new controller as HomeController in this path app/Http/Controllers/HomeController.php. Make sure you should have a visitor table with some data. this controller will manage data and chart data and view file, so put bellow content in the controller file:

    <?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

In last step, we have to create view file "google-line-chart.blade.php" for generate view chart, so create google-line-chart file and put bellow 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 - w3alert.com</h1>
        <div id="linechart" style="width: 900px; height: 500px"></div>
      </body>
    </html>

Now you can run and check.