How To Create Dynamic Bar Chart In Laravel

Websolutionstuff | Jul-01-2020 | Categories : Laravel PHP jQuery

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

So. let's see the dynamic bar chart in laravel and the dynamic bar chart example.

Step 1: Install laravel
Step 2: Add migration and route
Step 3: Add Controller and model
Step 4: Create a blade file



Step 1: Install Laravel

Type the following command in the terminal.

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


 Step 2: Add/Create Migration Table

We need dynamic data for the bar chart example. So first, we have to create migration for the "product" table using laravel PHP artisan command, So, the first type is 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('barchart', 'BarchartController@barchart');


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 BarchartController
php artisan make:model Product


Step 5: Add Code In Controller

In this step, we will add the below code in the App\Http\Controllers\BarchartController path.


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

Now in this step, we are creating a barchart.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 barchart 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 barchart in laravel -</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>

<script type="text/javascript">
var bars_basic_element = document.getElementById('bars_basic');
if (bars_basic_element) {
    var bars_basic = echarts.init(bars_basic_element);
        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: [



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



Clone Project From Github: Dynamic Bar Chart In Laravel


You might also like:

Recommended Post
Featured Post
How To Create Candlestick Chart In Laravel 9 Using Highcharts
How To Create Candlestick Char...

In this article, we will see how to create a candlestick chart in laravel 9 using highcharts. A candlestick is a ty...

Read More


How to Increase max_input_vars in PHP Ubuntu
How to Increase max_input_vars...

Hey folks! If you've ever encountered issues with PHP hitting the max_input_vars limit, you're not alone. In thi...

Read More


How To Add Watermark On Image In Laravel 10
How To Add Watermark On Image...

In this article, we will how to add a watermark to an image in laravel 10. Here we will learn about laravel 10 adding a...

Read More


Vue Js Get Array Of Length Or Object Length
Vue Js Get Array Of Length Or...

In this tutorial, we will see you example of vue js get an array of length or object length. we will learn about vu...

Read More