DEV Community

Sospeter Mong'are
Sospeter Mong'are

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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'));
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Step 8: Run Your Laravel Application

Start your Laravel development server:

php artisan serve
Enter fullscreen mode Exit fullscreen mode

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)