Dynamic Pie Chart Example In Laravel 9

In this article, we will see a dynamic pie chart example in laravel 9. Pie charts are used to represent data in graphics view. for the creation of a dynamic pie chart example, you need to create a model, controller, route, blade file, and database. Also, we will use echart js to create a dynamic pie chart example.

So, let's see the laravel 9 dynamic pie chart example and dynamic charts in laravel 9.

How To Create Dynamic Pie Chart In Laravel 9

Step 1: Install Laravel 9

Step 2: Create Migration Table

Step 3: Add Route

Step 4: Create Controller And Model

Step 5: Add Code In Model And Controller

Step 6: Create Blade File

 

Step 1: Install Laravel 9

In this step, we will create the laravel 9 project using the following command.

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

 

 

 Step 2: Create Migration Table

Now, we need dynamic data for the pie chart example. So, we have to create a migration for the "product" table using the below command.

php artisan make:migration create_products_table --create=products

After running this command you will find the PHP file on location "database/migrations/". And in this file add the below code.

<?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 these changes we need to run this migration by the following command in our terminal:

php artisan migrate

 

 

Step 3: Add Route

Now, add routes in the web.php file.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EchartController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('echarts', [EchartController::class,'echart']);

 

Step 4: Create Controller And Model

After adding the route, we need to create a new controller and model for the pie chart example. So, type the below command for creating a controller.

php artisan make:controller EchartController
php artisan make:model Product

 

 

Step 5: Add Code In Model And Controller

 Add the below code to the Product Model.

app\Models\Product.php

<?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 the below code in the EchartController.php file.

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)
    {
    	$Laptop = Product::where('product_type','Laptop')->get();
    	$Phone = Product::where('product_type','Phone')->get();
    	$Desktop = Product::where('product_type','Desktop')->get();
    	$laptop_count = count($Laptop);    	
    	$phone_count = count($Phone);
    	$desktop_count = count($Desktop);
    	return view('echart',compact('laptop_count','phone_count','desktop_count'));
    }
}

 

Step 6: Create Blade File

In this step, we are creating an echart.blade.php file for viewing.

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Dynamic Pie Chart Example In Laravel 9 - 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.1/echarts.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="col-md-12">
	<h1 class="text-center">Dynamic Pie Chart Example In Laravel 9 - 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({
        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: ['Laptop', 'Phone','Desktop'],
            itemHeight: 8,
            itemWidth: 8
        },

        series: [{
            name: 'Product Type',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#fff'
                }
            },
            data: [
                {value: {{$laptop_count}}, name: 'Laptop'},
                {value: {{$phone_count}}, name: 'Phone'},
                {value: {{$desktop_count}}, name: 'Desktop'}
            ]
        }]
    });
}
</script>

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS