Laravel GEO Chart using Lavacharts Example

Today, i going to give you example of how to add geochart in your laravel 5 application using lavacharts package. Normally we used geochart on back-end for check users country wise with graphical way. In this post we will implement geo chart with country and it's total users. lavacharts advantage is you can manage all data with chart matadata from controller, you just render on view.

we can add geo chart in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.

lavacharts provide several other charts like bar chart, Area chart, Column Chart, Pie Chart, Line Chart etc. In this post we will use geo chart with good graphical way. you can use in your laravel application, you just follow few step, after you can get output as bellow preview.

Preview:

Step 1: Installation

In first step we have to download lavacharts package for generate chart file from view blade file. So first run bellow command in your terminal:

composer require khill/lavacharts

Now open config/app.php file and add service provider.

'providers' => [
	....
	Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,
]

Step 2: Add Table and Model

we require to create new table "country_users" 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 country_users table using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_country_users_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 country_users table.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCountryUsersTable extends Migration
{

    public function up()
    {
        Schema::create('country_users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('total_users');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::drop("country_users");
    }
}

After craete "country_users" table you should create CountryUser model for country_users, so first create file in this path app/CountryUser.php and put bellow content in CountryUser.php file:

app/CountryUser.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class CountryUser extends Model
{

    public $fillable = ['name','total_users'];

}

Ok, now you can add few records like as bellow :

Step 3: Add Route

In this is step we need to add route for generate view. so open your app/Http/routes.php file and add following route.

Route::get('laracharts', 'ChartController@getLaraChart');

Step 4: Create Controller

Ok, now we should create new controller as ChartController in this path app/Http/Controllers/ChartController.php. Make sure you should have country_users table with some data. this controller will manage data and chart data and view file, so put bellow content in controller file:

app/Http/Controllers/ChartController.php

namespace App\Http\Controllers;

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

class ChartController extends Controller
{

    public function getLaraChart()
    {
    	$lava = new Lavacharts; // See note below for Laravel

		$popularity = $lava->DataTable();
		$data = CountryUser::select("name as 0","total_users as 1")->get()->toArray();

		$popularity->addStringColumn('Country')
		           ->addNumberColumn('Popularity')
		           ->addRows($data);

		$lava->GeoChart('Popularity', $popularity);

        return view('laracharts',compact('lava'));
    }

}

Step 4: Create View File

In last step, we have to create view file "laracharts.blade.php" for generate view chart, so create laracharts file and put bellow code:

resources/view/laracharts.blade.php

<div id="pop-div" style="width:800px;border:1px solid black"></div>
<?= $lava->render('GeoChart', 'Popularity', 'pop-div') ?>

Now you can run and check.

you can get more information about laracharts from here : laracharts.