How To Create Dynamic Pie Chart In Laravel 8

Websolutionstuff | Oct-02-2020 | Categories : Laravel jQuery

In this article, we will see how to create a dynamic pie chart in laravel 8. 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. So, follow step by step then definatly you will get the output of a dynamic pie chart example.

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

Laravel 8 Dynamic Pie Chart Example

Step 1: Install Laravel

Type the below command in your terminal to create a new project of the dynamic pie chart.

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.

php artisan make:migration create_products_table --create=products

After running this command you will find the php file "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 the command in our terminal.

php artisan migrate

 

 

Step 3: Add Resource Route

Now add a route in the web.php file.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

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

Route::get('echarts', 'App\Http\Controllers\EchartController@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 to create a controller.

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

 

Step 5: Add Code In Model And Controller

Now,  Add the below code in the Product Model file.

 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 app\Http\Controllers\EchartController.php file.

<?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 6: Create Blade File

Now, 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>how to create dynamic pie chart in laravel 8 - 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 8 - 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: ['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>

 

 

Output:

dynamic pie chart in laravel 8

 

Download Code From Github: Dynamic Pie Chart In Laravel 8

 


You might also like:

Recommended Post
Featured Post
How to Add Bootstrap 5 in Angular 17 Application
How to Add Bootstrap 5 in Angu...

Welcome to this tutorial where I'll guide you through the process of integrating Bootstrap 5 into your Angular 17 ap...

Read More

Mar-25-2024

How To Validate 10 Digit Mobile Number Using Regular Expression
How To Validate 10 Digit Mobil...

In This small tutorial, I will explain to you how to validate a 10-digit mobile number using regular expressions in...

Read More

Jun-15-2020

Laravel 8 Remove/Hide Columns While Export Data In Datatables
Laravel 8 Remove/Hide Columns...

In this article, we will see how to remove/hide columns while export data in datatables in laravel 8. When we are u...

Read More

Oct-13-2020

Laravel 9 Livewire Pagination Example
Laravel 9 Livewire Pagination...

In this article, we will see laravel 9 livewire pagination example. we will learn how to create a laravel live...

Read More

Sep-29-2022