Introduction
Pie charts and donut charts are great visualization tools for displaying data proportions. In this tutorial, we'll create a Laravel dashboard that shows the percentage of vacant and non-vacant houses using the Chart.js library. This will involve setting up the database, creating routes, controllers, views, and integrating JavaScript for chart rendering.
Prerequisites
Before we begin, make sure you have the following prerequisites:
- Laravel installed on your system.
- A database with a
houses
table containing fields:property_id
,house_number
,amount
,is_vacant
,created_at
, andupdated_at
.
Let's get started!
Step 1: Create a Controller
In your Laravel project, generate a controller that will handle data retrieval and rendering:
php artisan make:controller HouseController
Step 2: Define a Route
In the routes/web.php
file, define a route for displaying the chart:
Route::get('/dashboard', 'HouseController@dashboard')->name('dashboard');
Step 3: Controller Logic
In the HouseController.php
file, create a method to fetch data and pass it to the view:
use App\Models\House;
public function dashboard()
{
$vacantHouses = House::where('is_vacant', 1)->count();
$nonVacantHouses = House::where('is_vacant', 0)->count();
return view('dashboard', compact('vacantHouses', 'nonVacantHouses'));
}
Step 4: Create the View
Create a Blade view (e.g., dashboard.blade.php
) in the resources/views
directory to render the chart:
@extends('layouts.app')
@section('content')
<div class="container">
<h1>House Vacancy Chart</h1>
<canvas id="houseChart" width="400" height="400"></canvas>
</div>
<script src="{{ asset('js/chart.js') }}"></script>
<script>
var ctx = document.getElementById('houseChart').getContext('2d');
var data = {
labels: ['Vacant', 'Non-Vacant'],
datasets: [{
data: [@json($vacantHouses), @json($nonVacantHouses)],
backgroundColor: ['#36A2EB', '#FFCE56']
}]
};
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: data
});
</script>
@endsection
Step 5: Include Chart.js
Make sure you include the Chart.js library in your resources/views/layouts/app.blade.php
file:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Step 6: Create JavaScript File
Create a JavaScript file (e.g., chart.js
) in the public/js
directory of your Laravel project to hold the chart rendering logic.
Step 7: Route to the Dashboard
To access the dashboard, use the named route in your application:
<a href="{{ route('dashboard') }}">Dashboard</a>
Step 8: Run Your Laravel Application
Start your Laravel development server:
php artisan serve
Access the dashboard by visiting http://localhost:8000/dashboard
in your browser.
Step 9: Result
You should now see a pie chart or donut chart displaying the percentage of vacant and non-vacant houses in your dashboard.
That's it! You've successfully created a dashboard with a pie chart or donut chart to visualize the vacancy status of houses in your Laravel application using Chart.js.
Feel free to customize the chart's appearance and styling to suit your needs. Happy coding!
Top comments (0)