Laravel 9 Dynamic Bar Chart Example
In this article, we will see the laravel 9 dynamic bar chart example. Bar charts are used to represent data in graphics view. For the creation of a dynamic bar chart example, we will create a route, controller, blade file, and database. So, we will learn how to create a dynamic bar chart in laravel 9. Also, we will use echart js for the bar chart example.
So, let's see dynamic bar chart in laravel 9, bar chart in laravel 9, and bar chart in PHP.
Step 1: Install Laravel 9 For Dynamic Bar Chart
Step 2: Create Migration Table
Step 3: Add Route
Step 4: Create Controller And Model
Step 5: Add Code In Controller
Step 6: Create Blade File For Dynamic Bar Chart
In this step, we will install laravel 9 using the following command.
composer create-project --prefer-dist laravel/laravel laravel_9_bar_chart_example
Now, we need dynamic data for the bar chart example. So, we have to create a migration for the "products" table using the below command.
php artisan make:migration create_products_table --create=products
After running this command you will find the PHP file on location "database/migrations/". And in this file 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 these changes we need to run this migration by the following command in our terminal.
php artisan migrate
Now, add a route in the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BarchartController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('laravel9/bar-chart', [BarchartController::class,'barchart']);
In this step, we need to create a controller and model for the bar chart example. So, type the below command for creating a controller and model.
php artisan make:controller BarchartController
php artisan make:model Product
Add the below code in the EchartController.php file.
app\Http\Controllers\EchartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class BarchartController extends Controller
{
public function barchart(Request $request)
{
$Laptop = Product::where('product_type','Laptop')->get();
$Phone = Product::where('product_type','Phone')->get();
$Desktop = Product::where('product_type','Desktop')->get();
$laptop_count = count($Laptop);
$phone_count = count($Phone);
$desktop_count = count($Desktop);
return view('barchart',compact('laptop_count','phone_count','desktop_count'));
}
}
Add the below code in the Product Model file.
app\Models\Product.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $guarded = [];
}
In this step, we create a barchart.blade.php file for viewing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Laravel 9 Dynamic Bar Chart Example - Techsolutionstuff</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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.1/echarts.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="col-md-12">
<h1 class="text-center">Laravel 9 Dynamic Bar Chart Example - Techsolutionstuff</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: ['Laptop', 'Phone','Desktop'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Total Products',
type: 'bar',
barWidth: '20%',
data: [
{{$laptop_count}},
{{$phone_count}},
{{$desktop_count}}
]
}
]
});
}
</script>
Output:
You might also like:
- Read Also: How To Create Custom Helper Function In Laravel 9
- Read Also: How To Use Toastr Notification In Laravel 9
- Read Also: Laravel 8 Highcharts Example Tutorial
- Read Also: Laravel 8 Google Bar Chart Example
