Laravel Highcharts Example

Throughout this Laravel Highcharts Example tutorial we will share you how to create & use charts in Laravel using Highcharts package. As a begginer we need to show the new stats in chart or graph, we can use more then chart pachakges but highchart is best of them.

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.

You can simply use Line Charts, Bar Charts, Pie Charts, Area Charts of highcharts in laravel 5, laravel 6, laravel 7, laravel 8 or laravel 9 apps. So this laravel highcharts example tutorial helps you, how to fetch month wise data and how to display month wise data in highcharts for analytics on laravel application.

The Highcharts library comes with all the tools you need to create reliable and secure data visualizations. Built on JavaScript and TypeScript, all our charting libraries work with any back-end database or server stack. We offer wrappers for the most popular programming languages (.Net, PHP, Python, R, Java) as well as iOS and Android, and frameworks like Angular, Vue, and React.

So, follow the below steps and easily implement highcharts in laravel application.

Install Laravel App

First, we need to install a new laravel application to write down about using Highcharts in Laravel. You can ignore this process if you already have the laravel app installed.

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

Go into the app

cd laravel-highcharts-example

Connect App to Database

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=

Define Routes

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;

Route::get('users-stats', [ChartController::class, 'userStats']);

Create Controller & Update Code

Generate a controller with below command:

php artisan make:controller ChartController

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

<?php

namespace App\Http\Controllers;

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

class ChartController extends Controller
{
    public function userStats()
    {
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');

        return view('analytics', compact('users'));
    }
}

Create Blade File

Next, navigate the resources/views directory and create a new blade view file in analytics.blade.php, Next open the resources/view/analytics.blade.php file and update the below code on it;

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Highcharts Example</title>
</head>

<body>
<h1 class="text-center">Laravel 9 Highcharts Example</h1>
<div id="container" class="w-50"></div>
</body>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var users =  <?php echo json_encode($users) ?>;

    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2022'
        },
        subtitle: {
            text: 'Source: codingdriver.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: users
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>
</html>

Generate Dummy Records for Testing

We need to create some dummy user records to display the data in graphical form using charts.

First run the migration command to generate the users table in database which you have created and updated and .env file;

php artisan migrate

In general, you can do it with ease by just using the following tinker command.

php artisan tinker
User::factory()->count(80)->create()

Start your Laravel Project

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

php artisan serve

Next copy this url and paste in browser for testing laravel highchart example to showing the stats;

http://127.0.0.1:8000/users-stats

Here you can see the new users signup showing using HighCharts according months.

Laravel Highcharts Example – How to use Highchart in Laravel Tutorial