Blog

How to Create ApexCharts Bar Chart in Laravel 11 | websolutioncode.com
How to Create ApexCharts Bar Chart in Laravel 11 | websolutioncode.com

How to Create ApexCharts Bar Chart in Laravel 11

Creating dynamic and visually appealing charts is a crucial aspect of modern web development. Laravel, being a popular PHP framework, provides robust tools for handling database operations and rendering dynamic content. ApexCharts, on the other hand, offers beautiful and interactive charting options for web applications. In this tutorial, we will combine the power of Laravel with ApexCharts to create a bar chart that fetches data from a database in Laravel 11.

Step 1: Setting Up Laravel

Before we begin, ensure you have Laravel 11 installed on your system. If not, you can install it using Composer by running the following command:

composer create-project --prefer-dist laravel/laravel myproject

Replace myproject with the name of your project.

Step 2: Database Setup

Next, we need a database table to fetch data for our chart. For simplicity, let’s assume we have a table named sales with columns id, product, and revenue. Populate this table with some sample data.

Step 3: Install ApexCharts

To integrate ApexCharts into our Laravel project, we’ll use npm (Node Package Manager). If you haven’t installed npm, you can get it by installing Node.js from https://nodejs.org. Once npm is installed, navigate to your Laravel project directory and run:

npm install apexcharts

This will install ApexCharts in your project.

Step 4: Fetch Data from Database

In Laravel, we use Eloquent ORM to interact with the database. In your controller, retrieve the data from the sales table:

use App\Models\Sale;

public function index()
{
    $sales = Sale::select('product', 'revenue')->get();
    return view('chart', compact('sales'));
}

Step 5: Render Chart in View

Now, let’s create a view file chart.blade.php where we’ll render the chart. Inside this file, include the necessary ApexCharts JavaScript and create a container for our chart:

<div id="chart"></div>

<script src="{{ asset('js/apexcharts.min.js') }}"></script>
<script>
    var salesData = @json($sales->pluck('revenue'));
    var products = @json($sales->pluck('product'));

    var options = {
        chart: {
            type: 'bar'
        },
        series: [{
            name: 'Revenue',
            data: salesData
        }],
        xaxis: {
            categories: products
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
</script>

Step 6: Route ConfigurationFinally,

Finally, configure a route to access the chart:

Route::get('/chart', [ChartController::class, 'index']);

Step 7: View Your Chart

Navigate to http://yourdomain.com/chart in your browser, and you should see a beautiful bar chart displaying the sales revenue for each product fetched from the database.

Conclusion

In this tutorial, we learned how to create a bar chart using ApexCharts in a Laravel 11 project. By fetching data from a database table and rendering it dynamically, we can create powerful data visualizations that enhance the user experience of our web applications. With this knowledge, you can further customize and expand your charts to suit the needs of your project. Happy charting!

Tags: , ,