Creating a House Vacancy Pie Chart in Laravel with Chart.js
Published: 2023-09-29 01:30:24

# 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:

```bash
php artisan make:controller HouseController
```

## Step 2: Define a Route

In the `routes/web.php` file, define a route for displaying the chart:

```php
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:

```php
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:

```php
@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:

```html
<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:

```php
<a href="{{ route('dashboard') }}">Dashboard</a>
```

## Step 8: Run Your Laravel Application

Start your Laravel development server:

```bash
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!