How To Create Dynamic Linechart In Laravel

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

In this post, we will see how to create a dynamic line chart in laravel. A dynamic line chart or line plot or line graph or curve chart is a type of chart that displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields. The line chart is used to display online shopping, online sales, and online users count.

For the creation of a dynamic line chart example you need to create a route, controller, blade file, and database, So if you will follow my tutorial step by step then definitely you will get the output for the charts line.

 

Step 1: Install Laravel

Type the following command in the terminal to install a new project in laravel for chart js.

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

 

 

 Step 2: Create Migration Table

We are getting dynamic data for the chart using js. So first, we need to create migration for the "product" table using the laravel PHP artisan command. So, the first type below command:

php artisan make:migration create_products_table --create=products

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

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    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();
        });
    }
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

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

php artisan migrate

And after migration, you need to add some records as per the below screen print.

product table

 

 

Step 3: Add Resource Route

Now add a route in Routes/web.php

Route::get('linechart', 'LinechartController@linechart');

 

 Step 4: Create Controller And Model

After adding the route we need to create a new controller and model for the line chart example. So, type the below command in your terminal to create a controller.

php artisan make:controller LinechartController
php artisan make:model Product

 

Step 5: Add Code In Controller

Now add the below code in your linechartcontroller.

<?php

namespace App\Http\Controllers;

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

class LinechartController extends Controller
{
    public function linechart(Request $request)
    {
    	$phone_18 = Product::where('product_type','phone')->where('year','2018')->get(); 
    	$phone_19 = Product::where('product_type','phone')->where('year','2019')->get();
    	$phone_20 = Product::where('product_type','phone')->where('year','2020')->get();   	
    	
    	$laptop_18 = Product::where('product_type','laptop')->where('year','2018')->get();
    	$laptop_19 = Product::where('product_type','laptop')->where('year','2019')->get();
    	$laptop_20 = Product::where('product_type','laptop')->where('year','2020')->get();

    	$tablet_18 = Product::where('product_type','tablet')->where('year','2018')->get();
    	$tablet_19 = Product::where('product_type','tablet')->where('year','2019')->get();
    	$tablet_20 = Product::where('product_type','tablet')->where('year','2020')->get();
    	
    	$phone_count_18 = count($phone_18);    	
    	$phone_count_19 = count($phone_19);
    	$phone_count_20 = count($phone_20);
    	
    	$laptop_count_18 = count($laptop_18);
    	$laptop_count_19 = count($laptop_19);
    	$laptop_count_20 = count($laptop_20);

    	$tablet_count_18 = count($tablet_18);
    	$tablet_count_19 = count($tablet_19);
    	$tablet_count_20 = count($tablet_20);
    	
    	return view('linechart',compact('phone_count_18','phone_count_19','phone_count_20','laptop_count_18','laptop_count_19','laptop_count_20','tablet_count_18','tablet_count_19','tablet_count_20'));
    }
}

 

 

Step 6: Create Blade File

In last we are creating a blade file for viewing the output of the line chart. So, copy the below code in your linechart.blade.php file.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>how to create dynamic linechart in laravel - 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 linechart in laravel - websolutionstuff.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="line_stacked"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>	
</div>
</body>
</html>

<script type="text/javascript">
var line_stacked_element = document.getElementById('line_stacked');
if (line_stacked_element) {
    var line_stacked = echarts.init(line_stacked_element);
    line_stacked.setOption({
        animationDuration: 750,
        grid: {
            left: 0,
            right: 20,
            top: 35,
            bottom: 0,
            containLabel: true
        },        
        legend: {
            data: ['phone', 'laptop', 'tablet'],
            itemHeight: 8,
            itemGap: 20
        },

        // Add tooltip
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.75)',
            padding: [10, 15],
            textStyle: {
                fontSize: 13,
                fontFamily: 'Roboto, sans-serif'
            }
        },
        
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: [
                '2018', '2019', '2020'
            ],
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        }],

        // Vertical axis
        yAxis: [{
            type: 'value',
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
                }
            }
        }],

        // Add series
        series: [
            {
                name: 'phone',
                type: 'line',
                stack: 'Total',
                smooth: true,
                symbolSize: 7,
                data: [{{$phone_count_18}},{{$phone_count_19}},{{$phone_count_20}}],
                itemStyle: {
                    normal: {
                        borderWidth: 2
                    }
                }
            },
            {
                name: 'laptop',
                type: 'line',
                stack: 'Total',
                smooth: true,
                symbolSize: 7,
                data: [{{$laptop_count_18}},{{$laptop_count_19}},{{$laptop_count_20}}],
                itemStyle: {
                    normal: {
                        borderWidth: 2
                    }
                }
            },
            {
                name: 'tablet',
                type: 'line',
                stack: 'Total',
                smooth: true,
                symbolSize: 7,
                data: [{{$tablet_count_18}},{{$tablet_count_19}},{{$tablet_count_20}}],
                itemStyle: {
                    normal: {
                        borderWidth: 2
                    }
                }
            }
        ]
    });
}
</script>

 

 

After following all steps you will get output like the below screen print.

linechart

Clone Project From Github: Dynamic Line chart In Laravel

 


You might also like :

Recommended Post
Featured Post
How to Filter Datatable using Dropdown in Laravel 10
How to Filter Datatable using...

Hello developers! 👋 Ever found yourself dealing with a DataTable in Laravel and wished for a nifty way to filter th...

Read More

Feb-07-2024

How To Image Upload Using Ajax In Laravel 9
How To Image Upload Using Ajax...

In this article, we will see how to image upload using ajax in laravel 9. Here, we will learn about image upload in...

Read More

Feb-07-2023

How To Validate Form In React JS
How To Validate Form In React...

In this article, we will see how to validate a form in react js. We will validate the input type email, phone numbe...

Read More

Sep-07-2022

Export Buttons In Datatable
Export Buttons In Datatable

In this tutorial i will show you How To Add Export Buttons In Datatable, If you want to export DataTable data...

Read More

Sep-02-2020