In my exploration of web development, I've come to realize the crucial role data presentation plays in creating impactful user experiences. Whether I'm analyzing user behaviors, tracking market trends, or simply visualizing dynamic information, the ability to communicate data effectively is indispensable.
Among the multitude of visualization techniques, dynamic line charts stand out as a compelling way to illustrate data trends over time, providing a clear and intuitive visual representation.
With Laravel 10, the latest iteration of the renowned PHP framework, I continue to be fascinated by its elegance and versatility.
In this comprehensive guide, I dive headfirst into the process of creating dynamic line charts in Laravel 10, unlocking the potential to transform raw data into engaging visual narratives.
Whether I'm an experienced Laravel developer seeking to enrich my application's visual storytelling or a newcomer eager to explore the world of data visualization, this guide equips me with the essential insights to seamlessly integrate dynamic line charts into my projects.
Join me as I navigate the intricate terrain of data representation, delve into the realm of interactive line charts, and leverage Laravel 10's capabilities to breathe life into my data-driven applications.
Together, let's embark on this journey of converting data into captivating visuals, enhancing the depth of insights and user experiences within my applications.
So, let's embark on this rewarding adventure together, as we unlock the potential of data visualization with Laravel 10 and ECharts.js.
Create a new Laravel 10 project using Composer by running the following command in your terminal.
composer create-project --prefer-dist laravel/laravel linechart
We need dynamic data for the line chart example. Therefore, we first need to create a migration for the "product" table using the Laravel PHP artisan command. The command to create the migration is as follows
php artisan make:migration create_products_table --create=products
After running this command, you will find the PHP file at the 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 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');
}
}
After this, we need to run this migration by following the command in our terminal.
php artisan migrate
Open the routes/web.php file in your Laravel project. Add the following line to create resource routes for your LinechartController.
Route::get('line/chart', 'LinechartController@lineChart');
After adding the route, we need to create a new controller and model. To do this, type the following command to generate a new controller.
php artisan make:controller LinechartController
php artisan make:model Product
In this step, we will add the below code in the App\Http\Controllers\LinechartController.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class LinechartController extends Controller
{
public function lineChart(Request $request)
{
$mobile = Product::where('product_type','mobile')->get();
$tablet = Product::where('product_type','tablet')->get();
$laptop = Product::where('product_type','laptop')->get();
$mobile_count = count($mobile);
$tablet_count = count($tablet);
$laptop_count = count($laptop);
return view('line_chart',compact('mobile_count','tablet_count','laptop_count'));
}
}
Now in this step, we are creating a line_chart.blade.php file for viewing. Also, we are using Apache ECharts. Apache ECharts is a powerful, interactive charting and data visualization library for browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Line Chart - Vidvatek</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
xAxis: {
type: 'category',
data: ['Phone', 'Tablet', 'Laptop']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
{value: {{$mobile_count}}, name: 'Mobile'},
{value: {{$tablet_count}}, name: 'Tablet'},
{value: {{$laptop_count}}, name: 'Laptop'}
],
type: 'line'
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
Output:
Finally, start the Laravel development server to see the dynamic line chart in action.
Visit local URL in your browser, and you should see the dynamic line chart populated with data fetched from the Laravel backend.
Congratulations! You've successfully created a dynamic line chart in Laravel 10 using echarts.js. You can now customize the chart further or use real data from your application's database to make it more interactive and informative.
You might also like:
- Read Also: How To Create Dynamic Pie Chart In Laravel 10
- Read Also: Laravel 10 many to many Relationship Example
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: Laravel 10 REST API CRUD Operation