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.
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
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.
Now add a route in Routes/web.php
Route::get('linechart', 'LinechartController@linechart');
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
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'));
}
}
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.
You might also like :
Hello developers! 👋 Ever found yourself dealing with a DataTable in Laravel and wished for a nifty way to filter th...
Feb-07-2024
In this article, we will see how to image upload using ajax in laravel 9. Here, we will learn about image upload in...
Feb-07-2023
In this article, we will see how to validate a form in react js. We will validate the input type email, phone numbe...
Sep-07-2022
In this tutorial i will show you How To Add Export Buttons In Datatable, If you want to export DataTable data...
Sep-02-2020