How to add charts in Laravel 9 using Highcharts

Laravel is an open-source PHP web framework. Laravel was developed as an attempt to provide a more complicated alternative to the framework that is provided by CodeIgniter. Symfony serves as the primary inspiration for the company’s architectural designs.

When version 3 of the framework was made available, which included features like the Artisan command line interface, database migrations, and support, the framework’s popularity increased. Additionally, it pioneered a method of packaging known as bundles.

The fundamental strength of Laravel is found in the language’s expressive and appealing syntax, which contributes to the language’s object-oriented nature, as well as the Model-View-Controller-based architectural pattern that it uses.

Why Laravel?

Laravel is a widely used development framework for creating intuitive, user-friendly, and market-ready websites. It offers several features such as verification, security testing, handling sessions, quality analysis, and routing processes to make the development task effortless.

The preset components of the Laravel framework are perfectly adapted to the process of developing websites of any size, from personal to commercial. In addition to that, it has a huge number of built-in functions that make the job of developers much simpler. In addition to that, the official packages that are provided by Laravel are the icing on the cake.

You can also connect with the Best Laravel Development Company to do this. But if you want to do it independently, keep reading this article. So, this article walks you through the process of creating charts in Laravel by using the Highcharts library. In this section, we are going to take a step-by-step look at the process of working with Laravel and Highcharts by using examples briefly.

An Example of Highcharts in Laravel 9

In order to have a better grasp of a huge amount of data and the links that exist between different aspects of the data, charts are commonly used. It is possible to quickly and effectively scan charts, which can subsequently be compared to raw data.

You have a wide variety of options for how to depict data when using the great open-source chart package known as Highcharts. Including but not limited to Pie Charts, Line Charts, Bar Charts, Area Charts, and so on. Creating a line chart using Highcharts and Laravel is going to be the primary emphasis of this tutorial.

To achieve our goal, we need to create a new Laravel application so that we can document how to use Highcharts in Laravel. If you already have the Laravel app installed on your device, you may skip over this phase.

In any other case, use the command that is provided further down to define an archetype of a Laravel application.

composer create-project laravel/laravel laravel-highcharts-example --prefer-dist

Following the successful completion of the preceding command, which announces that the application has been installed, you should, without spending too much time, enter the application.

cd laravel-highcharts-example

This section of the Link with Database Tutorial is where we will talk about reaching an agreement between the database and the laravel application. First of all, who doesn’t like to mess about with some data?

If you wish to get and save the data, you need to provide the information of your database in the.env file. Information such as this includes the name of your database, your user name, and your password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

To migrate the default user to the database, use the following command.

php artisan migrate

Make Up Some False Records

For the purpose of displaying the data in a graphical format using charts, we need to generate some fake user records. Using the following tinker command is all that is required to do this task with relative simplicity.

php artisan tinker
User::factory()->count(50)->create()
Establish and Personalize a Route

The fundamental building component of a Laravel application is called a route, and it is this pillar that is tasked with the job of guiding users from point A to point B and vice versa.

In most cases, we are required to display a straightforward chart along with some data that has been generated from the database. Therefore, make sure that the following route is included in the routes/web.php file.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HighchartController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/chart', [HighchartController::class, 'handleChart']);

Putting in Place the Controller

Executing the following command will construct a controller for us so that we may display the chart and the data at the same time without taking any unnecessary risks.

php artisan make:controller HighchartController

Insert the following piece of code in app/Http/Controllers/HighchartController.php file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class HighchartController extends Controller
{
    public function handleChart()
    {
        $userData = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
        return view('home', compact('userData'));
    }
}

Define Blade File

In order to present the example of HighCharts in Laravel, please build a new blade view file in the resources/view/home.blade.php directory. In this file, we will import and produce charts.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <title>Laravel Highcharts Demo</title>
</head>
<body>
    <h1>Highcharts in Laravel Example</h1>
    <div id="container"></div>
</body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var userData = <?php echo json_encode($userData)?>;
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2020'
        },
        subtitle: {
            text: 'Source: positronx.io'
        },
        xAxis: {
            categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
                'October', 'November', 'December'
            ]
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: userData
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
</script>
</html>

Conclusion

In the end, we were successful in completing this lesson. Using the Highcharts library, we discovered how to visualize data in Laravel during the course of this lesson. We hope that you will have a much better understanding of how to deal with charts at the end of this tutorial.

Post categories: