How to use Highcharts in Laravel 9?

10-Apr-2023

.

Admin

How to use Highcharts in Laravel 9?

Hi friends,

Today, I am explain how to use highcharts in laravel 9. In this article i will show you highchart in laravel 9. We will learn how to add highchart in laravel 9. This tutorial demonstrates how to create charts in Laravel 9 with Highcharts. you will learn how to implement a highcharts in laravel 9 using highchart js.using highcharts you can create interactive charts easily for your web projects. so, now we will see basic line chart using highcharts in laravel 9.

Highcharts is a modern SVG-based, multi-platform charting library. It makes it easy to add interactive charts to web and mobile projects.

If you work with any web application or e-commerce application or any dating application etc, And need to show analytics on these application dashboards. So this laravel 9 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.

Step 1: Download Laravel


Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app

Step 2: Add Route

first of all we will create simple route for creating simple line chart. so let's add simple routes as like bellow:

routes/web.php

<?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, 'index']);

Step 3: Add Controller

Here, we will create new controller as HighchartController. so let's add bellow code on that controller file.

php artisan make:controller HighchartController

app/Http/Controllers/HighchartController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

use DB;

class HighchartController extends Controller

{

/**

* Write code on Method

*

* @return response()

*/

public function index()

{

$users = User::select(DB::raw("COUNT(*) as count"))

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

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

->pluck('count');

return view('chart', compact('users'));

}

}

Step 4: Add Blade File:

here, we need to create blade file and in this blade file we use highchart js and use their code.

resources/views/chart.blade.php

<!DOCTYPE html>

<html>

<head>

<title>How to use Highcharts in Laravel 9? - Nicesnippets.com</title>

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

</head>

<body>

<div class="col-md-12 text-center my-4">

<h2>How to use Highcharts in Laravel 9? - Nicesnippets.com</h2>

</div>

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

</body>

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

<script type="text/javascript">

var users = {{ Js::from($users) }};

Highcharts.chart('container', {

title: {

text: 'New User Growth, 2022'

},

subtitle: {

text: 'Source: itsolutionstuff.com.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>

Step 5: Add 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:

Run Laravel App:

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

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/chart

Output:

I hope it can help you...

#Laravel 9