Laravel 9 Livewire Charts Example

In this tutorial you will learn about the Laravel 9 Livewire Charts Example and its application with practical example.

In this Laravel 9 Livewire Charts Example Tutorial I’ll will show how to create charts, pie charts, column charts and area charts using livewire package in laravel 9. In this tutorial you will learn to implement charts in laravel 9 application using livewire package. With livewire package we can visualize data in your laravel web application. In this tutorial I’ll share example to demonstrate use of livewire charts in laravel 9.

Table Of Contents−

Laravel 9 Livewire Charts Example

In this step by step tutorial I will demonstrate you how to implement livewire charts using livewire package in laravel 9. Please follow the instruction given below:

Install Laravel 9
Connecting Database
Create Model & Migration using Artisan

Install Livewire Package
Install Livewire Charts Package
Build Livewire Component using Artisan

Create Route
Create View File
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

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

1	composer create-project --prefer-dist laravel/laravel LaraCharts

Configuring Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database-name

DB_USERNAME=database-user-name

DB_PASSWORD=database-password

Create Post Model & Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Expense -m

1	php artisan make:model Expense -m

Now, open create_expenses_table.php file inside database/migrations/ directory. Then put the function up() with following code:

public function up()
{
    Schema::create('expenses', function (Blueprint $table) {
        $table->id();
        $table->string('description');
        $table->decimal('amount');
        $table->string('type');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('expenses', function (Blueprint $table) {

$table->id();

$table->string('description');

$table->decimal('amount');

$table->string('type');

$table->timestamps();

});

}

Then, Execute the following command on the terminal to create tables into the database:

php artisan migrate

1	php artisan migrate

Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Install Livewire Charts Package

In this step, we will install livewire Charts Package via the composer dependency manager. Use the following command to install livewire Charts Package.

composer require asantibanez/livewire-charts

1	composer require asantibanez/livewire-charts

Build Livewire Charts Component using Artisan

In this step we will create a livewire charts component using following command:

php artisan make:livewire LivewireCharts

1	php artisan make:livewire LivewireCharts

The above command will create the following component files on the following path:

app/Http/Livewire/LivewireCharts.php
resources/views/livewire/livewire-charts.blade.php

1 2	app/Http/Livewire/LivewireCharts.php resources/views/livewire/livewire-charts.blade.php

Now, go to app/Http/Livewire folder and open LivewireCharts.php file. Then add the following code into your LivewireCharts.php file:

<?php
namespace App\Http\Livewire;
use App\Models\Expense;
use Asantibanez\LivewireCharts\Models\AreaChartModel;
use Asantibanez\LivewireCharts\Models\ColumnChartModel;
use Asantibanez\LivewireCharts\Models\LineChartModel;
use Asantibanez\LivewireCharts\Models\PieChartModel;
use Livewire\Component;
class LivewireCharts extends Component
{
public $types = ['food', 'shopping', 'entertainment', 'travel', 'other'];
public $colors = [
'food' => '#f6ad55',
'shopping' => '#fc8181',
'entertainment' => '#90cdf4',
'travel' => '#66DA26',
'other' => '#cbd5e0',
];
public $firstRun = true;
protected $listeners = [
'onPointClick' => 'handleOnPointClick',
'onSliceClick' => 'handleOnSliceClick',
'onColumnClick' => 'handleOnColumnClick',
];
public function handleOnPointClick($point)
{
dd($point);
}
public function handleOnSliceClick($slice)
{
dd($slice);
}
public function handleOnColumnClick($column)
{
dd($column);
}
public function render()
{
$expenses = Expense::whereIn('type', $this->types)->get();
$columnChartModel = $expenses->groupBy('type')
->reduce(function (ColumnChartModel $columnChartModel, $data) {
$type = $data->first()->type;
$value = $data->sum('amount');
return $columnChartModel->addColumn($type, $value, $this->colors[$type]);
}, (new ColumnChartModel())
->setTitle('Expenses by Type')
->setAnimated($this->firstRun)
->withOnColumnClickEventName('onColumnClick')
);
$pieChartModel = $expenses->groupBy('type')
->reduce(function (PieChartModel $pieChartModel, $data) {
$type = $data->first()->type;
$value = $data->sum('amount');
return $pieChartModel->addSlice($type, $value, $this->colors[$type]);
}, (new PieChartModel())
->setTitle('Expenses by Type')
->setAnimated($this->firstRun)
->withOnSliceClickEvent('onSliceClick')
);
$lineChartModel = $expenses
->reduce(function (LineChartModel $lineChartModel, $data) use ($expenses) {
$index = $expenses->search($data);
$amountSum = $expenses->take($index + 1)->sum('amount');
if ($index == 6) {
$lineChartModel->addMarker(7, $amountSum);
}
if ($index == 11) {
$lineChartModel->addMarker(12, $amountSum);
}
return $lineChartModel->addPoint($index, $amountSum, ['id' => $data->id]);
}, (new LineChartModel())
->setTitle('Expenses Evolution')
->setAnimated($this->firstRun)
->withOnPointClickEvent('onPointClick')
);
$areaChartModel = $expenses
->reduce(function (AreaChartModel $areaChartModel, $data) use ($expenses) {
return $areaChartModel->addPoint($data->description, $data->amount, ['id' => $data->id]);
}, (new AreaChartModel())
->setTitle('Expenses Peaks')
->setAnimated($this->firstRun)
->setColor('#f6ad55')
->withOnPointClickEvent('onAreaPointClick')
->setXAxisVisible(false)
->setYAxisVisible(true)
);
$this->firstRun = false;
return view('livewire.livewire-charts')
->with([
'columnChartModel' => $columnChartModel,
'pieChartModel' => $pieChartModel,
'lineChartModel' => $lineChartModel,
'areaChartModel' => $areaChartModel,
]);
}
}

<?php

namespace App\Http\Livewire;

use App\Models\Expense;

use Asantibanez\LivewireCharts\Models\AreaChartModel;

use Asantibanez\LivewireCharts\Models\ColumnChartModel;

use Asantibanez\LivewireCharts\Models\LineChartModel;

use Asantibanez\LivewireCharts\Models\PieChartModel;

use Livewire\Component;

class LivewireCharts extends Component

{

public $types = ['food', 'shopping', 'entertainment', 'travel', 'other'];

public $colors = [

'food' => '#f6ad55',

'shopping' => '#fc8181',

'entertainment' => '#90cdf4',

'travel' => '#66DA26',

'other' => '#cbd5e0',

];

public $firstRun = true;

protected $listeners = [

'onPointClick' => 'handleOnPointClick',

'onSliceClick' => 'handleOnSliceClick',

'onColumnClick' => 'handleOnColumnClick',

];

public function handleOnPointClick($point)

{

dd($point);

}

public function handleOnSliceClick($slice)

{

dd($slice);

}

public function handleOnColumnClick($column)

{

dd($column);

}

public function render()

{

$expenses = Expense::whereIn('type', $this->types)->get();

$columnChartModel = $expenses->groupBy('type')

->reduce(function (ColumnChartModel $columnChartModel, $data) {

$type = $data->first()->type;

$value = $data->sum('amount');

return $columnChartModel->addColumn($type, $value, $this->colors[$type]);

}, (new ColumnChartModel())

->setTitle('Expenses by Type')

->setAnimated($this->firstRun)

->withOnColumnClickEventName('onColumnClick')

);

$pieChartModel = $expenses->groupBy('type')

->reduce(function (PieChartModel $pieChartModel, $data) {

$type = $data->first()->type;

$value = $data->sum('amount');

return $pieChartModel->addSlice($type, $value, $this->colors[$type]);

}, (new PieChartModel())

->setTitle('Expenses by Type')

->setAnimated($this->firstRun)

->withOnSliceClickEvent('onSliceClick')

);

$lineChartModel = $expenses

->reduce(function (LineChartModel $lineChartModel, $data) use ($expenses) {

$index = $expenses->search($data);

$amountSum = $expenses->take($index + 1)->sum('amount');

if ($index == 6) {

$lineChartModel->addMarker(7, $amountSum);

}

if ($index == 11) {

$lineChartModel->addMarker(12, $amountSum);

}

return $lineChartModel->addPoint($index, $amountSum, ['id' => $data->id]);

}, (new LineChartModel())

->setTitle('Expenses Evolution')

->setAnimated($this->firstRun)

->withOnPointClickEvent('onPointClick')

);

$areaChartModel = $expenses

->reduce(function (AreaChartModel $areaChartModel, $data) use ($expenses) {

return $areaChartModel->addPoint($data->description, $data->amount, ['id' => $data->id]);

}, (new AreaChartModel())

->setTitle('Expenses Peaks')

->setAnimated($this->firstRun)

->setColor('#f6ad55')

->withOnPointClickEvent('onAreaPointClick')

->setXAxisVisible(false)

->setYAxisVisible(true)

);

$this->firstRun = false;

return view('livewire.livewire-charts')

->with([

'columnChartModel' => $columnChartModel,

'pieChartModel' => $pieChartModel,

'lineChartModel' => $lineChartModel,

'areaChartModel' => $areaChartModel,

]);

}

Now, go to resources/views/livewire/ folder and open livewire-charts.blade.php file. Then add the following code into your livewire-charts.blade.php file:

<div class="container mx-auto space-y-4 p-4 sm:p-0">
<ul class="flex flex-col sm:flex-row sm:space-x-8 sm:items-center">
<li>
<input type="checkbox" value="travel" wire:model="types"/>
<span>Travel</span>
</li>
<li>
<input type="checkbox" value="shopping" wire:model="types"/>
<span>Shopping</span>
</li>
<li>
<input type="checkbox" value="food" wire:model="types"/>
<span>Food</span>
</li>
<li>
<input type="checkbox" value="entertainment" wire:model="types"/>
<span>Entertainment</span>
</li>
<li>
<input type="checkbox" value="other" wire:model="types"/>
<span>Other</span>
</li>
</ul>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<div class="shadow rounded p-4 border bg-white flex-1" style="height: 32rem;">
<livewire:livewire-column-chart
key="{{ $columnChartModel->reactiveKey() }}"
:column-chart-model="$columnChartModel"
/>
</div>
<div class="shadow rounded p-4 border bg-white flex-1" style="height: 32rem;">
<livewire:livewire-pie-chart
key="{{ $pieChartModel->reactiveKey() }}"
:pie-chart-model="$pieChartModel"
/>
</div>
</div>
<div class="shadow rounded p-4 border bg-white" style="height: 32rem;">
<livewire:livewire-line-chart
key="{{ $lineChartModel->reactiveKey() }}"
:line-chart-model="$lineChartModel"
/>
</div>
<div class="shadow rounded p-4 border bg-white" style="height: 32rem;">
<livewire:livewire-area-chart
key="{{ $areaChartModel->reactiveKey() }}"
:area-chart-model="$areaChartModel"
/>
</div>
</div>

<li>

<span>Travel</span>

</li>

<li>

<span>Shopping</span>

</li>

<li>

</li>

<li>

<span>Entertainment</span>

</li>

<li>

<span>Other</span>

</li>

</ul>

<livewire:livewire-column-chart

key="{{ $columnChartModel->reactiveKey() }}"

:column-chart-model="$columnChartModel"

</div>

<livewire:livewire-pie-chart

key="{{ $pieChartModel->reactiveKey() }}"

:pie-chart-model="$pieChartModel"

</div>

<livewire:livewire-line-chart

key="{{ $lineChartModel->reactiveKey() }}"

:line-chart-model="$lineChartModel"

</div>

<livewire:livewire-area-chart

key="{{ $areaChartModel->reactiveKey() }}"

:area-chart-model="$areaChartModel"

</div>

Create Route

After this, we need to define routes for crud operations in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('/livewire-charts', function () {
return view('home');
});

Route::get('/livewire-charts', function () {

return view('home');

});

Create View File

In this step we will create a blade view file. Go to resources/views/ folder and create one blade view files that name home.blade.php file. Then add the following code into home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 Livewire Charts</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<livewire:styles />
</head>
<body class="bg-gray-200 p-8">
<livewire:livewire-charts/>
<livewire:scripts />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel 9 Livewire Charts</title>

<livewire:styles />

</head>

<livewire:livewire-charts/>

<livewire:scripts />

</body>

</html>

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/livewire-charts

1	http://localhost:8000/livewire-charts

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 9 Livewire Charts Example