Creating a House Vacancy Pie Chart in Laravel with Chart.js

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, and updated_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!