Laravel 11 - Larapex Charts
Laravel 11 - Larapex Charts
In this tutorial, we'll explore how to implement charts in a Laravel 11 application using Larapex Charts, providing a visual, data-driven approach for insights.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through setting up and displaying charts in a Laravel application using the Larapex Charts package. We begin by creating a new Laravel project, configuring it with Pest for testing and MySQL for the database. After installing the Larapex Charts package, we publish its configuration file to customize chart settings. Next, we define a route and build a simple pie chart, updating the view with Blade syntax and Tailwind CSS for styling. Once the development server is running, we verify that the chart displays correctly on the homepage. Finally, we show how to switch from a pie to a donut chart and highlight the variety of chart types available, such as line, bar, radar, and heatmap, providing flexibility to visualize your data.
Step # 1 : Initialize the Laravel Application.
Let’s start by creating a fresh Laravel app or use an existing one if you already have it. To create a new project, you can use the following command.
laravel new charts
Alternatively, you can use Composer by running the command.
composer create-project laravel/laravel --prefer-dist charts
During the setup process, choose the following options to align the stack.
- Starter Kit: Select None.
- Testing Framework: Choose Pest.
- Database: Go with MySQL.
- Migrations: When asked, type yes to run the default migrations.
This will give us a clean Laravel project named charts, prepped with Pest for testing and MySQL as the database providing a solid starting point for development and testing.
Step # 2 : Navigate to Your Laravel Project.
Open your terminal of choice (like Git Bash), and move into the root directory of your Laravel project. This is where all your project files live and where you’ll run most of your development commands. For example, if you used XAMPP and named your project charts, you can use the following command.
cd c:xampp/htdocs/charts
This step ensures you're inside the correct folder to start working with your Laravel application.
Step # 3: Add Larapex Charts to Your Project.
To begin creating charts in Laravel, we need to install the Larapex Charts package. It provides a simple and elegant way to build interactive charts using ApexCharts. In your project terminal, run the following command.
composer require arielmejiadev/larapex-charts
Once installed, the package will auto-register, so there’s no need for manual configuration. You're now ready to start integrating charts into your application.
Step # 4: Publish the Larapex Charts Configuration.
To customize the default settings of Larapex Charts, we need to publish its configuration file. This will allow you to tweak chart options like colors, animations, and other preferences directly from your Laravel project. Run the following command in your terminal.
php artisan vendor:publish --tag=larapex-charts-config
This will create a configuration file where you can adjust global chart settings to match your design or branding needs.
Step # 5: Define a Route and Create Your First Chart.
Now that everything’s set up, let’s build a simple chart and display it on the homepage. You can pass dynamic data to the chart, but for now, we’ll use static values to get things started. First, import the LarapexChart class at the top of your routes file.
use ArielMejiaDev\LarapexCharts\LarapexChart;
Then, update the default route in web.php to generate a pie chart.
Route::get('/', function () {
$chart = (new LarapexChart)->pieChart()
->setTitle('Top 3 scorers of the team.')
->setSubtitle('Season 2024.')
->addData([40, 50, 30])
->setLabels(['Player 7', 'Player 10', 'Player 9']);
return view('welcome', compact('chart'));
});
This route creates a chart object and passes it to the welcome view, where you’ll display it. You can easily replace the static data with real values from your database later on.
Step # 6 : Set Up the Chart View.
Now let's update the welcome.blade.php file to display the chart in a clean and responsive layout. Replace the existing content of resources/views/welcome.blade.php with the following code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Larapex Chart Example - Code Shotcut</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
<div class="p-6 m-20 bg-white rounded shadow">
{!! $chart->container() !!}
</div>
</div>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>
</html>
This template uses Tailwind CSS for basic styling and includes the necessary scripts to render the chart. The {!! $chart->container() !!} and {{ $chart->script() }} lines handle the chart output and its functionality. Once added, visiting your homepage should now show the pie chart we created earlier.
Step # 7 : Run and View Your Chart.
With everything set up, it’s time to see your chart in action. Start the Laravel development server by running this command in your project terminal.
php artisan serve
Once the server is running, open your browser and head over to: http://127.0.0.1:8000.
Pie Chart
You should see the pie chart we created earlier, displayed on the homepage. This confirms that the Larapex Charts package is working correctly and you're ready to build more visualizations!
Donut Chart
Now that the pie chart is working, let’s try a different visualization style, donut chart. It’s quite similar to a pie chart but with a hollow center, giving it a modern look. To do this, update your route as shown below. The only change you need is swapping pieChart() with donutChart().
use ArielMejiaDev\LarapexCharts\LarapexChart;
Route::get('/', function () {
$chart = (new LarapexChart)->donutChart()
->setTitle('Top 3 scorers of the team.')
->setSubtitle('Season 2024.')
->addData([40, 50, 30])
->setLabels(['Player 7', 'Player 10', 'Player 9']);
return view('welcome', compact('chart'));
});
This small tweak instantly changes the chart style while keeping the data and layout the same. Refresh your browser to see the new donut chart in action.
Available Chart Types
Larapex Charts gives you the flexibility to visualize data in a variety of formats depending on your needs. Here's a quick list of chart types you can use.
- Pie
- Donut
- Radial Bar
- Polar Area
- Line
- Area
- Bar
- Horizontal Bar
- Heatmap
- Radar Chart
You can switch between these by simply calling the corresponding method like lineChart(), barChart(), or radarChart() when building your chart. This makes it easy to experiment and find the best way to present your data.
Conclusion
By following this guide, you’ve successfully integrated Larapex Charts into your Laravel application, enabling you to display interactive charts with ease. You started by setting up a fresh Laravel project, installed the Larapex Charts package, and published its configuration to customize chart settings. After building and displaying your first pie chart, you learned how to switch to a donut chart and explored various other chart types, offering flexibility for different data visualizations. This straightforward approach to charting in Laravel can be extended to include dynamic data and more complex visualizations.
For further customization and advanced features, you can refer to the Larapex Charts documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments