How To Create Dynamic Pie Chart In Laravel

Websolutionstuff | Jun-24-2020 | Categories : Laravel PHP jQuery

In this article, we will see how to create a dynamic pie chart in laravel. charts are used to represent data in graphics view, for the creation of a dynamic pie chart example you need to create a route, controller, blade file, and database. So, if you will follow this tutorial step by step then definitely you will get output.

So, let's see a dynamic pie chart in laravel 6 and laravel 7 or a dynamic pie chart example.

Step 1: Install Laravel

Type the following command in the terminal.

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



 Step 2: Add/Create Migration Table

We need dynamic data for the pie chart example. So first, we have to create migration for the "product" table using the Laravel PHP artisan command. So, first type the below command.

php artisan make:migration create_products_table --create=products

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


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) {

     * Reverse the migrations.
     * @return void
    public function down()

after this, we need to run this migration by following the command in our terminal.

php artisan migrate



Step 3: Add Resource Route

Now, Add  route in Routes/web.php

Route::get('echarts', 'EchartController@echart');


Step 4: Create Controller And Model

After adding the route we need to create a new controller and model so type the below command to create a controller.

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


Step 5: Add Code In Controller

 Add the below code in the App\Http\Controllers\EchartController path.


namespace App\Http\Controllers;
use App\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 6: Create Blade File

Now in this final step, we are creating an echart.blade.php file for view.

<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>how to create dynamic pie chart in laravel -</title>	
	<link rel="stylesheet" href="">
	<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>	
<div class="col-md-12">
	<h1 class="text-center">how to create dynamic pie chart in laravel -</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>
<script type="text/javascript">
var pie_basic_element = document.getElementById('pie_basic');
if (pie_basic_element) {
    var pie_basic = echarts.init(pie_basic_element);
        color: [
        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'}



So, We are done with our code and you can see the output as below screen print.




Clone Project From Github: Dynamic Pie Chart In Laravel


You might also like:

Recommended Post
Featured Post
How To Create Calendar Event In Laravel 9 Using AJAX
How To Create Calendar Event I...

In this article, we will see how to create a calendar event in laravel 9 using ajax. Here, we will learn how to add...

Read More


Laravel 9 Vue JS CRUD Operation Example
Laravel 9 Vue JS CRUD Operatio...

In this article, we will see the laravel 9 vue js crud operation example. Here, we will learn how to create a vue 3...

Read More


How to Display Validation Error Message in Laravel Vue JS
How to Display Validation Erro...

Hey folks, are you ready to make your Laravel Vue.js application even more user-friendly by implementing validation erro...

Read More


Laravel 10 Change Column Name And Type In Migration
Laravel 10 Change Column Name...

In this article, we will see laravel 10 change column names and data types in migration. Here, we will learn about...

Read More