How to use GEO Chart Example by using lavacharts Laravel?

Today now in this post i will show you How to use GEO Chart Example by using lavacharts Laravel? Here i am going to give you an example of how to add the geo chart in our laravel application by using lavacharts package. Normally we used geochart on the back-end for check the users country wise also with graphical way. Now In this post i will implement the geo chart with country and it’s for total users. lavacharts advantage is we can manage the all data with chart matadata from the controller, we just render on view.

we can also add the geo chart in laravel 6, laravel 7 and laravel 8 any version of laravel.

We know in lavacharts provide us a several other charts as like bar chart, Area chart, Column Chart, Pie Chart, Line Chart etc. Now in this post we will use the geo chart with the good graphical way.

Step 1: Installation

At first step we need to download the lavacharts package for generate the chart file from view blade file. So at first need to run bellow command in our terminal:

composer require khill/lavacharts

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

'providers' => [
	....

	Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,

]
Step 2: Add Table and Model

we need to create the new model name CountryUser also with table as “country_users” with on that way. we will get the data from this table, we can use our own table but this is for an example. we need to create migration for the country_users table by using Laravel php artisan command, so first fire the bellow command:

php artisan make:Model CountryUsers -m

After this command you will find the one file in the following path database/migrations and we need to put the bellow code in your migration file for create the 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");
    }
}

And then put bellow content in CountryUser.php file:

app/Model/CountryUser.php

namespace App;
use Illuminate\Database\Eloquent\Model;

class CountryUser extends Model
{
    public $fillable = ['name','total_users'];
}
Step 3: Add Route

Now in this step we have to add new route for generate the view. so need to open our app/Http/web.php file and then add the following route.

Route::get('laracharts', 'ChartController@getLaraChart');
Step 4: Create Controller

Ok, now we need to create a new controller as name ChartController in this location path is app/Http/Controllers/ChartController.php. Also Make sure we should have  the country_users table  with the some data. Now this controller will manage the data and chart data and also for view file, so put bellow the content in controller file:

app/Http/Controllers/ChartController.php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Khill\Lavacharts\Lavacharts;
use App\Model\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

Now we are In last step, we need to create a view file as “laracharts.blade.php” for generate the view chart, so need to create laracharts file and put the 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') ?>

Read Also: How to convert file extension using CloudConvert in laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →