Latest Code Tutorials

Laravel Geo Chart Example Tutorial From Scratch

Laravel GeoChart Example


How To Create GeoChart in Laravel is the topic, we will discuss today. We will use khill/lavacharts package for creating a Geo chart in Laravel. Lavachart Package provides a different chart like Parent, Area, Bar, Calendar, Column, Combo, Donut, Gauge, Pie, Line, Scatter.  A  Geo chart denotes a map of a country, a continent, or a region with areas classified in one of three ways:

  • The region mode colors whole regions, such as countries, provinces, or states.
  • The markers mode uses circles to designate regions that are scaled according to a value that you specify.
  • The text mode labels the regions with identifiers

Geo chart is not scrollable or draggable. If you get more information, then go to LavaCharts.

Content Overview

Create GeoChart in Laravel

We are going to Configure Laravel Project.

Step 1: Install Laravel Project

Download Fresh Laravel Project by the typing following command.

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

Step 2: Install Lavacharts Package

So now let’s install khill/lavacharts package in our laravel application.

composer require khill/lavacharts

Step 3: Define providers and aliases

Find the providers in config >> app.php file and register the LavachartsServiceProvider.

'providers' => [
        // ...

Put the aliases in config >> app.php file and register the aliases.

'aliases' => [
        // ...
        'Lava' => Khill\Lavacharts\Laravel\LavachartsFacade::class,

Step 4: Setup a MySQL database

Now, set the database in the .env file.



I have fixed local database credentials.

Next, migrate two tables given by Laravel Move to your cmd and pasted the following command.

php artisan migrate

It will present two tables in your database.

  1. users
  2. password_resets  

Step 5: Compose a model and migration file

Type the following command in your terminal.

php artisan make:model Footballfan -m

It will create two files.

  1. Footballfan.php model.
  2. create__football_fans_table migration file.

We need to create a Schema for the football fans table. So navigate to Laravel  >>  database  >>  migrations  >> create__football_fans_table

// create_football_fans_table

public function up()
        Schema::create('football_fans', function (Blueprint $table) {

In the database, you can see the football fan data table.

You can see that we have added some data.

Laravel GeoChart Tutorial

Step 6: Create one controller and route 

$ php artisan make:controller FootballFansController

It will create one controller file called FootballFansController.php

we register route in routes  >>  web.php file. So let us do it.


Route::get('geochart', 'FootballFansController@geoChart');

Next, add some code into geoChart() function.



namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Khill\Lavacharts\Lavacharts;
use App\FootballFan;

class FootballFansController extends Controller
    public function geoChart()
    	$lava = new Lavacharts; 
        $fans = $lava->DataTable();
        $value=FootballFan::select('footballteam as 0', 'fan as 1')
	    $fans->addStringColumn('Football Team')
		           ->addNumberColumn('Football Fans')
        $lava->GeoChart('Football Fans', $fans);
        return view('geochart',compact('lava'));

Step 7: Create a view file for display Geochart

Create a file in resources  >>  views  >>   geochart.blade.php and put this following code in it.

<!-- geochart.blade.php -->

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Laravel GeoChart Example</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">  
    <div class="container">
      <h2>Laravel GeoChart Example</h2><br/>
      <div id="geo"></div>
      <?= $lava->render('GeoChart', 'Football Fans', 'geo') ?>

Start Laravel Development Server by the following command in cmd.

php artisan serve

Type Below URL on your browser.


Laravel GeoChart Example


Finally, Our Laravel Geo Chart Example is over. Thanks for taking it.

Recommended Posts

Laravel and Vue js Chart js

How To Add Charts in Laravel using ChartJS

Laravel Middleware Example

Laravel 6 Generate PDF From View

How To Export Data In Excel and CSV In Laravel 6

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.