Hello Friends, In this tutorial I will show you how to create dynamic pie chart in laravel 8, Pie charts are use to representing data in graphics view, for creation of dynamic pie chart in laravel 8 example you need to create model, controller, route, blade file and database.
In laravel 8 dynamic pie chart we need some basic js file like, echarts.min.js and some other js and css file.
So, let's see how to create dynamic pie chart in laravel 8.
Step 1 : Install Laravel 8 for Dynamic Pie Chart Example
Step 2 : Create Model and Migration for Pie Chart Example in Laravel 8
Step 3 : Add Route in web.php file
Step 4 : Create Controller
Step 5 : Create Blade File
Step 1 : Install Laravel 8
Type the below command in your terminal to create new project of dynamic pie chart.
composer create-project --prefer-dist laravel/laravel echart
Step 2 : Create Model and Migration for Pie Chart Example in Laravel 8
Here, we are collecting data from database to dynamic data for pie chart example. So, create migration for product table using artisan command.
php artisan make: model Product -mAfter that add below codein this location "database/migrations/"
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', 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('products');
}
}after this we need to run this migration by following command in our terminal:
php artisan migrateStep 3: Add Route in web.php FileNow add route in routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Admin\EchartController;
Route::get('echarts', [EchartController::class,'echart']);
Step 4 : Create Controller
After adding route we need to create new conroller and model for pie chart example. so type below command for create controller.
php artisan make:controller EchartController
Add below code in your Product Model in app\Models\Product.php this file.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $table = 'products';
protected $guarded = [];
}
Add below code in your app\Http\Controllers\EchartController.php
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class EchartController extends Controller
{
public function echart(Request $request)
{
$fruit = Product::where('product_type','fruit')->get();
$veg = Product::where('product_type','vegitable')->get();
$grains = Product::where('product_type','grains')->get();
$fruit_count = count($fruit);
$veg_count = count($veg);
$grains_count = count($grains);
return view('echart',compact('fruit_count','veg_count','grains_count'));
}
}
Step 5 : Create Blade File
Now, we will creating echart.blade.php file for view.
<!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 8 - Techsolutionstuff</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 8 - Techsolutionstuff</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({
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: ['Fruit', 'Vegitable','Grains'],
itemHeight: 8,
itemWidth: 8
},
series: [{
name: 'Product Type',
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
data: [
{value: {{$fruit_count}}, name: 'Fruit'},
{value: {{$veg_count}}, name: 'Vegitable'},
{value: {{$grains_count}}, name: 'Grains'}
]
}]
});
}
</script>
And you will get output like below image.
Nguồn : How To Create Dynamic Pie Chart In Laravel 8
NguồnNguồn
Source : 
0 Nhận xét
Đăng nhận xét