How to Apexcharts using Larapex Charts in Laravel 11?

05-Jul-2024

.

Admin

How to Apexcharts using Larapex Charts in Laravel 11?

Hi, Dev

In this guide, I'll demonstrate how to generate dynamic ApexCharts using the Larapex Charts package in a Laravel 11 application.

ApexCharts is a JavaScript library designed to create visually stunning and interactive charts for websites. It simplifies data visualization with various chart types such as bar, line, and pie. Users can customize appearances, animate charts, and interact with them for deeper data exploration. Its ease of use and ability to make data visually appealing and comprehensible have made ApexCharts a popular choice.

In this example, we'll generate some dummy user records and display a pie chart representing all the months of the current year. Follow the steps below to integrate a chart into your Laravel 11 application.

Step for Laravel 11 Apexcharts Example


Step 1: Install Laravel 11

Step 2: Install arielmejiadev/larapex-charts

Step 3: Create Route

Step 4: Create Chart Class

Step 5: Create Controller

Step 6: Create Blade File

Step 7: Create Dummy Records

Run Laravel App

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Install arielmejiadev/larapex-charts

we need to install arielmejiadev/larapex-charts composer package using the following command:

composer require arielmejiadev/larapex-charts

Now, we will publish configuration file using the following command:

php artisan vendor:publish --tag=larapex-charts-config

Step 3: Create Route

First of all, we will create a simple route for creating a simple line chart. So let's add simple routes as below:

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\ApexchartsController;

Route::get('charts', [ApexchartsController::class, 'index']);

Step 4: Create Chart Class

In this step, we will create "Charts" folder in app folder. then we will create MonthlyUsersChart.php file with the following code:

app/Charts/MonthlyUsersChart.php

<?php

namespace App\Charts;

use ArielMejiaDev\LarapexCharts\LarapexChart;

use App\Models\User;

use DB;

class MonthlyUsersChart

{

protected $chart;

/**

* Write code on Method

*

* @return response()

*/

public function __construct(LarapexChart $chart)

{

$this->chart = $chart;

}

/**

* Write code on Method

*

* @return response()

*/

public function build()

{

$users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))

->whereYear('created_at', date('Y'))

->groupBy(DB::raw("Month(created_at)"))

->pluck('count', 'month_name');

return $this->chart->pieChart()

->setTitle('New Users - '.date('Y'))

->addData($users->values()->toArray())

->setLabels($users->keys()->toArray());

}

}

Step 5: Create Controller

Here, we will create a new controller named ApexchartsController. So let's add the code below to that controller file.

app/Http/Controllers/ApexchartsController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Charts\MonthlyUsersChart;

class ApexchartsController extends Controller

{

/**

* Write code on Method

*

* @return response()

*/

public function index(MonthlyUsersChart $chart)

{

return view('apexcharts', ['chart' => $chart->build()]);

}

}

Step 6: Create Blade File

here, we need to create blade file and in this blade file we use $chart variable and use their code.

resources/views/apexcharts.blade.php

<!DOCTYPE html>

<html>

<head>

<title>How to Apexcharts using Larapex Charts in Laravel 11? - NiceSnippets.com</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="card mt-5">

<h3 class="card-header p-3">How to Apexcharts using Larapex Charts in Laravel 11? - NiceSnippets.com</h3>

<div class="card-body">

{!! $chart->container() !!}

</div>

</div>

</div>

</body>

<script src="{{ $chart->cdn() }}"></script>

{{ $chart->script() }}

</html>

Step 7: Create Dummy Records:

Here, we need to add some dummy records on users table as monthly wise.

you can create dummy records using laravel tinker command as bellow:

php artisan tinker

User::factory()->count(30)->create()

You need to create users on each month with created date as like bellow screen shot:

apexcharts-using-larapex-charts-laravel-11-create-users

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/chart

Output:

apexcharts-using-larapex-charts-laravel-11-output

I hope it can help you...

#Laravel 11