How to use Highcharts in laravel with a real-world example even you will learn how to get data from database and display through Highcharts.

Highcharts is a popular JavaScript-based plugin which makes your data helpful to users. It is a ready-made tool that allows developers to create interactive charts in web or mobile applications.

Highcharts profoundly supports many programming languages, modern frameworks; it is more user-friendly and dynamic, offers smooth interaction regardless of complicated and large data sets. And yes, it has a vibrant community too.

Charts are essential GUI tools that make data more interactive. Users take it to help understand the data straightforward; this Laravel Highcharts tutorial will be discussed in this tutorial.

You will get a chance to learn Laravel highcharts with AJAX example from the beginning.

If you have ever wondered how to create a chart in laravel likewise how to use highcharts in laravel, you are right.

After completing this tutorial, you will better understand how to add charts in the laravel application that too from the server-side.

Install Laravel Project

Initiate the tutorial by installing a new laravel project:

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

Database Setup and Migration

To add database details open .env file and place database name, username and password:

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

Laravel comes with default user table, so you need to start your local server. On top of that, run the below command for migration:

php artisan migrate

Add Records with Tinker

Since we are displaying data on Highcharts from the server side, we will create few records in the database using Laravel tinker, open your console and follow the given process.

php artisan tinker

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

Above command adds the user records into the database:

=> Illuminate\Database\Eloquent\Collection {#3343
     all: [
       App\Models\User {#3348
         name: "Bart Dietrich",
         email: "adrienne.klein@example.com",
         email_verified_at: "2020-12-05 08:55:02",
         updated_at: "2020-12-05 08:55:02",
         created_at: "2020-12-05 08:55:02",
         id: 1,
       },
       App\Models\User {#3355
         name: "Dr. Cortez Beatty V",
         email: "harvey.stephania@example.org",
         email_verified_at: "2020-12-05 08:55:02",
         updated_at: "2020-12-05 08:55:02",
         created_at: "2020-12-05 08:55:02",
         id: 2,
       },
       App\Models\User {#3356
         name: "Diego Baumbach",
         email: "ruth.bosco@example.org",
         email_verified_at: "2020-12-05 08:55:02",
         updated_at: "2020-12-05 08:55:02",
         created_at: "2020-12-05 08:55:02",
         id: 3,
       },
       App\Models\User {#3357
         name: "Percival Stiedemann",
         email: "merl59@example.org",
         email_verified_at: "2020-12-05 08:55:02",
         updated_at: "2020-12-05 08:55:02",
         created_at: "2020-12-05 08:55:02",
         id: 4,
       },
       App\Models\User {#3358
         name: "Prof. Colton Stracke",
         email: "brent34@example.net",
         email_verified_at: "2020-12-05 08:55:02",
         updated_at: "2020-12-05 08:55:02",
         created_at: "2020-12-05 08:55:02",
         id: 5,
       },
...
...
...

Build Controller

Generate a controller with below command:

php artisan make:controller ChartController

Add below code in app/Http/Controllers/ChartController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class ChartController extends Controller
{
    public function highChart()
    {
        $items = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
          
        return view('welcome', compact('items'));
    }
}

Add Route

To add routes to enable chart view you need to paste the given below code in routes/web.php:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChartController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/

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

Create Blade View

You can use the current template of laravel app to construct the view, so add the below code in resources/view/welcome.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <title>Laravel Highcharts Tutorial</title>
</head>

<body>
    <div id="container"></div>
</body>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
    var items = <?php echo json_encode($items)?>;

    Highcharts.chart('container', {
        title: {
            text: 'Growth User, 2020'
        },
        subtitle: {
            text: 'Source: ISRO'
        },
        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: items
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 600
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        verticalAlign: 'bottom',
                        align: 'center'
                    }
                }
            }]
        }
    });

</script>

</html>

Now that you are done, you need to start the app:

php artisan serve

http://127.0.0.1:8000/

Summary

We tried to explain how to programmatically implement Highcharts from server-side in Laravel application and align it with AJAX. We hope you will like this laravel Highcharts example tutorial.