As a developer in the world of data-driven applications, I understand the significance of presenting complex information in a clear and visually appealing manner. Bar charts have always been my go-to choice for displaying data sets, as they enable users to grasp patterns, trends, and comparisons effortlessly.
Leveraging the power of Laravel 10, I have the perfect framework to build dynamic and interactive applications. By combining it with a robust charting library, I can create captivating visualizations that enhance the overall user experience.
In this article, I'll delve into the exciting realm of dynamic bar charts in Laravel 10. Whether I'm developing a dashboard, analytics tool, or any data-centric application, incorporating an interactive bar chart can elevate my project to new heights.
Together, we'll explore how to fetch data from the database, pass it to the frontend, and use charting libraries to generate stunning bar charts.
Throughout this guide, I'll take a step-by-step approach to building a dynamic bar chart that automatically adjusts to changes in data, providing real-time insights to users.
By harnessing the robust features of Laravel 10 and integrating a charting library, I'll create a seamless and engaging user experience.
With the knowledge gained from this tutorial, I'll be equipped to design and implement dynamic bar charts in my Laravel 10 projects, empowering my users to interact with data in a whole new way.
Whether I'm a seasoned Laravel developer or just starting my journey, this guide will help me visualize data with elegance and style.
So, if I'm ready to add a touch of visual magic to my application and bring my data to life with dynamic bar charts, let's dive into the world of Laravel 10 charting together.
Create a new Laravel 10 project using Composer by running the following command in your terminal.
composer create-project --prefer-dist laravel/laravel barchart
We need dynamic data for the bar 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 BarchartController.
Route::get('barchart', 'BarchartController@barchart');
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 BarchartController
php artisan make:model Product
In this step, we will add the below code in the App\Http\Controllers\BarchartController path.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class BarchartController extends Controller
{
public function barchart(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('barchart',compact('mobile_count','tablet_count','laptop_count'));
}
}
Now in this step, we are creating a barchart.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>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>How To Create Dynamic Bar Chart In Laravel 10 - Vidvatek</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">Bar Chart In Laravel 10 Example- Vidvatek</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: ['Mobile', 'Tablet','Laptop'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Total Products',
type: 'bar',
barWidth: '20%',
data: [
{{$mobile_count}},
{{$tablet_count}},
{{$laptop_count}}
]
}
]
});
}
</script>
Output:
Finally, start the Laravel development server to see the dynamic bar chart in action.
Visit local URL in your browser, and you should see the dynamic bar chart populated with data fetched from the Laravel backend.
Congratulations! You've successfully created a dynamic bar 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: Laravel 10 Many To Many Polymorphic Relationship
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: Laravel 10 REST API CRUD Operation
- Read Also: Laravel 10 Send Mail Using Queue