How to Create Dynamic Donut Chart in Laravel 11
Hello, laravel web developers! In this article, we'll create a dynamic donut chart in laravel 11. Also, we'll use the echarts library to create a doughnut chart in laravel 11. A donut chart, in its simplest form, is a pie chart with its center cut out to look like a donut.
Donut charts are used to show the proportions of categorical data, with the size of each piece representing the proportion of each category.
Laravel 11 Create Dynamic Donut Chart
In this step, we'll install laravel 11 application using the following command.
composer create-project --prefer-dist laravel/laravel dynamic-donut-chart
Next, we'll Configure your .env file with your database credentials.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password
Then, create a migration using the following command.
php artisan make:migration create_charts_table --create=charts
Migration:
public function up()
{
Schema::create('charts', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('value');
$table->timestamps();
});
}
Then, run the migrate the table into the database using the following command.
php artisan migrate
Next, we'll create a model and controller using the following command.
php artisan make:model Chart
Create a controller.
php artisan make:controller ChartController
app/Http/Controllers/ChartController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Chart;
class ChartController extends Controller
{
public function index()
{
$data = Chart::all();
return view('chart', compact('data'));
}
}
Now, Define a route to the web.php file.
routes/web.php
use App\Http\Controllers\ChartController;
Route::get('/chart', [ChartController::class, 'index']);
Next, we'll create a blade view to display the dynamic chart.
resources/views/chart.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dynamic Donut Chart in Laravel 11 using Echarts - Techsolutionstuff</title>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart-container"></div>
<script>
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: @json($data->map(function($item) {
return ['value' => $item->value, 'name' => $item->name];
}))
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
Next, we'll create seeder for sample data using the following command.
php artisan make:seeder ChartSeeder
database/seeders/ChartSeeder
use Illuminate\Database\Seeder;
use App\Models\Chart;
class ChartSeeder extends Seeder
{
public function run()
{
$data = [
['name' => 'Company A', 'value' => 1048],
['name' => 'Company B', 'value' => 735],
['name' => 'Company C', 'value' => 580],
['name' => 'Company D', 'value' => 484],
['name' => 'Company E', 'value' => 300],
];
foreach ($data as $item) {
Chart::create($item);
}
}
}
Run the seeder using the following command.
php artisan db:seed --class=ChartSeeder
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
- Read Also: Laravel 11 Real Time Chat Using Reverb and Vue
- Read Also: How To Create Tailwind CSS Pie Chart
- Read Also: Laravel 8 Highcharts Example Tutorial
- Read Also: How To Create Dynamic Bar Chart In Laravel
