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.