As a web developer, I understand the importance of data visualization in conveying information effectively to users. Among the various visualization techniques, pie charts have proven to be a popular choice for representing data distribution in a visually captivating manner.
Being a Laravel enthusiast, I am excited to delve into the process of creating a dynamic pie chart that harnesses the power of ECharts.js, a versatile and interactive JavaScript library.
Throughout this comprehensive guide, I will demonstrate how to seamlessly integrate dynamic data from the Laravel backend into a visually stunning and responsive pie chart using ECharts.js.
This library offers a wide range of customization options, making it an excellent tool to enhance your application's visual appeal and user experience.
Whether you are an experienced Laravel developer or just starting on your web development journey, rest assured that this tutorial is beginner-friendly, with clear explanations and practical code examples.
So, let's embark on this rewarding adventure together, as we unlock the potential of data visualization with Laravel 10 and ECharts.js.
Create a new Laravel 10 project using Composer by running the following command in your terminal.
composer create-project --prefer-dist laravel/laravel piechart
We need dynamic data for the pie chart example. Therefore, we first need to create a migration for the "product" table using the Laravel PHP artisan command. The command to create the migration is as follows
php artisan make:migration create_products_table --create=products
After running this command, you will find the PHP file at the location "database/migrations/". In this file, you need to add the below code.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('product', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->integer('price')->nullable();
$table->integer('year')->nullable();
$table->string('product_type')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('product');
}
}
After this, we need to run this migration by following the command in our terminal.
php artisan migrate
Open the routes/web.php file in your Laravel project. Add the following line to create resource routes for your PiechartController.
Route::get('pie/chart', 'PiechartController@pieChart');
After adding the route, we need to create a new controller and model. To do this, type the following command to generate a new controller.
php artisan make:controller PiechartController
php artisan make:model Product
In this step, we will add the below code in the App\Http\Controllers\PiechartController.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class PiechartController extends Controller
{
public function pieChart(Request $request)
{
$mobile = Product::where('product_type','mobile')->get();
$tablet = Product::where('product_type','tablet')->get();
$laptop = Product::where('product_type','laptop')->get();
$mobile_count = count($mobile);
$tablet_count = count($tablet);
$laptop_count = count($laptop);
return view('pie_chart',compact('mobile_count','tablet_count','laptop_count'));
}
}
Now in this step, we are creating a pie_chart.blade.php file for viewing. Also, we are using Apache ECharts. Apache ECharts is a powerful, interactive charting and data visualization library for browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>how to create dynamic pie chart in laravel - websolutionstuff.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="{{asset('assets/css/components.min.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{{asset('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/bootstrap.bundle.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/echarts.min.js')}}"></script>
</head>
<body>
<div class="col-md-12">
<h1 class="text-center">how to create dynamic pie chart in laravel - websolutionstuff.com</h1>
<div class="col-xl-6" style="margin-top: 30px;">
<div class="card">
<div class="card-body">
<div class="chart-container">
<div class="chart has-fixed-height" id="pie_basic"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var pie_basic_element = document.getElementById('pie_basic');
if (pie_basic_element) {
var pie_basic = echarts.init(pie_basic_element);
pie_basic.setOption({
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
title: {
text: 'Pie Chart Example',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
bottom: '0%',
left: 'center',
data: ['Mobile', 'Tablet','Laptop'],
itemHeight: 8,
itemWidth: 8
},
series: [{
name: 'Product Type',
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
data: [
{value: {{$mobile_count}}, name: 'Mobile'},
{value: {{$tablet_count}}, name: 'Tablet'},
{value: {{$laptop_count}}, name: 'Laptop'}
]
}]
});
}
</script>
Output:
Finally, start the Laravel development server to see the dynamic pie chart in action.
Visit local URL in your browser, and you should see the dynamic pie chart populated with data fetched from the Laravel backend.
Congratulations! You've successfully created a dynamic pie chart in Laravel 10 using echarts.js. You can now customize the chart further or use real data from your application's database to make it more interactive and informative.
You might also like:
- Read Also: Python for Beginners: Getting Started with Python
- Read Also: Importing Excel File into Database Using Python
- Read Also: Laravel 10 Import and Export CSV and Excel Files
- Read Also: How To Validate Form in React JS