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.

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) {
     * Reverse the migrations.
     * @return void
    public function down()

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

php artisan make:model Visitor


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.


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:


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")) 
        $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')

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:


    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      var visitor = <?php echo $visitor; ?>;
      google.charts.load('current', {'packages':['corechart']});
      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);
    <h1>Laravel Google Chart Example - CodeSolutionstuff.com</h1>
    <div id="linechart" style="width: 900px; height: 500px"></div>

You may now go and check.

Recommended Posts

View All

How to Create REST API in Laravel7 using Passport

rest api in laravel 7/6 step by step, rest api in laravel 7/6 tutorial, laravel 7/6 restful api authentication, laravel 7/6 passport rest api tutorial

Laravel Query Builder Where Exists Example

laravel use sql where exists clause,laravel whereExists, laravel whereExists not working,laravel where exists example,laravel exists query

Laravel 9 Socialite Login with LinkedIn Tutorial Example

How to use the Laravel socialite, Livewire, and Jetstream libraries to create a LinkedIn login system from scratch in Laravel

Laravel 8 Generate PDF with Graph Tutorial

Laravel 8 generates a graphed pdf. You will understand how to generate a pdf with a graph in the Laravel 8 app in this tutorial

Laravel 9 Scout Full Text Search with Algolia Tutorial

A full-text search feature in a web application is incredibly useful for users to navigate through content-rich web and mobile applications, as demons...