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.


Recommended Posts

View All

Laravel 9 Captcha Tutorial – Create Captcha in Laravel


A CAPTCHA is a challenge-response test used in computing to determine if a user is human. It is an abbreviation for the Completely Automated Public Tu...

How to Send SMS using Twilio in Laravel


Twilio shares cloud communications trends, customer tales, and advice for using Twilio's APIs to build scalable voice and SMS applications.

Laravel 9 Form Validation Example


In this Laravel 9 validation tutorial, I'll demonstrate how to validate form input and provide an error message before saving it to the database.

Learn About API Testing Tool in Laravel 8 Tutorial


In this Laravel 8 tutorial, you will learn about the API Testing Tool. Laravel 8 composer package Web service testing API utility. How to use the Lara...

How to Use Yajra Datatables in Laravel 9 Application


Learn how to enhance your Laravel 9 application with Yajra Datatables. This tutorial will guide you through the steps of integrating and using it.