Designing Dynamic Bubble Charts in Laravel Using Chart.js: A Step-by-Step Guide

3 min readDec 1, 2023

Introduction:
Bubble charts offer a visually engaging way to represent three-dimensional data. In this tutorial, we’ll guide you through integrating Chart.js into your Laravel application to create dynamic and interactive bubble charts.

Prerequisites

Before you begin, ensure the following prerequisites are met:

A Laravel project is set up.
Basic knowledge of Laravel and JavaScript.
Composer is installed for Laravel dependencies.

Step 1: Install Chart.js via CDN

Include Chart.js in your Laravel project by adding the following CDN link in the <head> section of your blade view:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Other head elements -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- Your Laravel application content -->
</body>
</html>

Step 2: Create a Controller

Generate a controller to handle the bubble chart data. Run the following Artisan command:

php artisan make:controller BubbleChartController

Step 3: Define Routes

In your routes/web.php file, define a route for the bubble chart controller:

use App\Http\Controllers\BubbleChartController;

Route::get('/bubble-chart', [BubbleChartController::class, 'bubbleChart']);

Step 4: Implement the Controller

Open BubbleChartController.php and implement the controller logic:

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class BubbleChartController extends Controller
{
    public function bubbleChart()
    {
        // Replace this with your actual data retrieval logic
        $data = [
            'labels' => ['Data Point 1', 'Data Point 2', 'Data Point 3', 'Data Point 4', 'Data Point 5'],
            'data' => [
                ['x' => 10, 'y' => 20, 'r' => 15],
                ['x' => 15, 'y' => 25, 'r' => 20],
                ['x' => 20, 'y' => 30, 'r' => 25],
                ['x' => 25, 'y' => 35, 'r' => 30],
                ['x' => 30, 'y' => 40, 'r' => 35],
            ],
        ];
        return view('bubble-chart', compact('data'));
    }
}

Step 5: Create a Blade View

Create a new Blade view file (resources/views/bubble-chart.blade.php) to render the bubble chart:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bubble Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 80%; margin: auto;">
        <canvas id="bubbleChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('bubbleChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bubble',
            data: {
                labels: @json($data['labels']),
                datasets: [{
                    label: 'Bubble Chart',
                    data: @json($data['data']),
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom'
                    },
                    y: {
                        type: 'linear',
                        position: 'left'
                    }
                }
            }
        });
    </script>
</body>
</html>

Conclusion

Congratulations! You’ve successfully integrated Chart.js into your Laravel application to create dynamic bubble charts. Explore additional customization options provided by Chart.js to enhance the visual appeal of your bubble charts. Happy charting!

Note: As in the previous examples, replace the static data in the controller with dynamic data fetched from your database or external API for a real-world scenario.

Go forth and get more out of your content. Go forth and conquer Medium! (and while you’re at it, follow me on Medium! and feel free to Subscribe)

Found this post useful? Kindly tap the 👏 button below! :)

🌟 Enjoy my blogging content? Support my work by buying me a virtual coffee on BuyMeACoffee! Your contributions help fuel insightful tech articles. Join hands in making coding more accessible and exciting for all. https://www.buymeacoffee.com/arjunamrutiya🚀