# Laravel - GEO Chart Example using lavacharts

## Laravel - GEO Chart Example using lavacharts

By Hardik Savani July 19, 2016 Category : Laravel![](https://a.vdo.ai/core/assets/img/cross.svg)PlayUnmuteLoaded: 1.17%Fullscreen[![VDO.AI](https://a.vdo.ai/core/assets/img/logo.svg)](https://vdo.ai/?utm_medium=video\&utm_term=itsolutionstuff.com\&utm_source=vdoai_logo)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 and laravel 9 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:**

![](https://www.itsolutionstuff.com/upload/laravel-geo-chart.png)

**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 :

![](https://www.itsolutionstuff.com/upload/laravel-geo-chart-table.png)

Read Also: [How to add charts in Laravel using Highcharts ?](https://www.itsolutionstuff.com/post/how-to-add-charts-in-laravel-5-using-highcharts-example.html)

**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');
```

[![](https://go.ezodn.com/charity/http/charity-ads.s3.amazonaws.com/charity_ads/1094/300x250.png)](https://go.ezodn.com/ads/charity/proxy?p_id=48996c6b-6552-44a0-4561-fb85e9d912aa\&d_id=77568\&imp_id=7962511332826917\&c_id=1094\&l_id=10016\&url=https%3A%2F%2Ffundraise.pencilsofpromise.org%2Fgive%2F405130%2F%23!%2Fdonation%2Fcheckout%3Fc_src%3Dadsezoic\&ffid=1\&co=VN)[![](https://go.ezodn.com/charity/http/charity-ads.s3.amazonaws.com/charity_ads/1094/300x250.png)](https://go.ezodn.com/ads/charity/proxy?p_id=48996c6b-6552-44a0-4561-fb85e9d912aa\&d_id=77568\&imp_id=7962511332826917\&c_id=1094\&l_id=10016\&url=https%3A%2F%2Ffundraise.pencilsofpromise.org%2Fgive%2F405130%2F%23!%2Fdonation%2Fcheckout%3Fc_src%3Dadsezoic\&ffid=1\&co=VN)

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

Read Also: [How to add charts in Laravel using Chart JS ?](https://www.itsolutionstuff.com/post/how-to-add-charts-in-laravel-5-using-chart-js-example.html)

```
<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](http://lavacharts.com/).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/laravel-advanced/laravel-geo-chart-example-using-lavacharts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
