How To Create Dynamic Bar Chart In Laravel

In this post we will see how to create dynamic bar chart in laravel. Here, we will create product model for bar chart example or bar chart in laravel, we have show all steps for dynamic bar chart example as below, so,let's see how to create dynamic bar chart in laravel.

 

Step 1 : Install Laravel for Dynamic Bar Chart Example

Step 2 : Add Migration and Route

Step 3 : Add Route

Step 4 : Create Controller And Model

Step 5 : Create Blade File for Dynamic Bar Chart Example

 

 

Step 1 : Install Laravel for Dynamic Bar Chart Example 

Run below command in terminal to create new project in laravel.

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

 

 Step 2 : Add Migration Table

Here, we required dynamic data for bar chart example so, we will create migration for "product" table using laravel php artisan command.

php artisan make:migration create_products_table --create=products

Now, make changes in migration file in this location "database/migrations".

<?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');
    }
}

Now, run this migration using below command.

php artisan migrate

 

Step 3: Add Route

Now, ceate route in routes/web.php

Route::get('barchart', 'BarchartController@barchart');

 

Step 4 : Create Controller And Model

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

use App\Http\Controllers\Admin\BarchartController;

Route::get('barchart', [BarchartController::class,'barchart']);

 

php artisan make:model Product

 

Add below code in your controller.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class BarchartController extends Controller
{
    public function barchart(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('barchart',compact('fruit_count','veg_count','grains_count'));
    }
}

 

Step 5: Create Blade File

Now,creating barchart.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 Bar Chart In Laravel - techsolutionstuff.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 Bar Chart In Laravel - techsolutionstuff.com </h1>
    <div class="col-md-8 col-md-offset-2">
    	<div class="col-xl-6">
    		<div class="card">
    			<div class="card-body">
    				<div class="chart-container">
    					<div class="chart has-fixed-height" id="bars_basic"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>	
</div>
</body>
</html>

<script type="text/javascript">
var bars_basic_element = document.getElementById('bars_basic');
if (bars_basic_element) {
    var bars_basic = echarts.init(bars_basic_element);
    bars_basic.setOption({
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['Fruit', 'Vegitable','Grains'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Total Products',
                type: 'bar',
                barWidth: '20%',
                data: [
                    {{$fruit_count}},
                    {{$veg_count}}, 
                    {{$grains_count}}
                ]
            }
        ]
    });
}
</script>

 

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

how_to_create_dynamic_barchart_in_laravel


 

You may 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