In this tutorial you will learn about the Laravel 9 Highcharts Example Tutorial and its application with practical example.
In this Laravel 9 Highcharts Example Tutorial I will show you how to implement highchart in laravel 9 application. You will learn to implement highchart in laravel 9. In this article I will demonstrate the use of highchart in laravel application. In this example we will fetch month wise data and display month wise data in highcharts for analytics on laravel 9 application.
Laravel 9 Highcharts Example Tutorial
In this step by step tutorial I will demonstrate you how to implement Highcharts in Laravel 9 application. Please follow the instruction given below.
Install Laravel 9
First of all we need to install a fresh laravel project. Download and install Laravel 9 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel larachart |
Setup Database
Now, create a MySQL database and connect it with your laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
Create web routes
In the first step we will define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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('highchart', [HighChartController::class, 'index']); |
Create Controller
Now, lets create a controller named HighChartController using command given below –
|
1 |
php artisan make:controller HighChartController |
Once the above command executed, it will create a controller file HighChartController.php in app/Http/Controllers/ directory. Open the HighChartController.php file and put the following code in it.
app/Http/Controllers/HighChartController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; class HighChartController extends Controller { /** * The attributes that are mass assignable. * * @var array */ 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('highchart', compact('users')); } } |
Create Blade File
Now, we will create a blade view file. Go to the resources/views/highchart.blade.php and put the below javascript and HTML code for displaying the highchart. So go to the resources/views/ and update the below javascript and HTML code for displaying the highchart:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <title>Laravel 8 Highcharts Example</title> </head> <body> <h1>Laravel 8 Highcharts Example</h1> <div id="container"></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, 2019' }, subtitle: { text: 'Source: Tutsmake.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> |
Remember to include highchart js libraries on your blade file:
|
1 2 3 4 |
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> |
Use below javascript as per requirement :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script type="text/javascript"> let chart = JSON.parse(`<?php echo $chart ?>`); Highcharts.chart('container', { title: { text: 'New User Growth, 2019' }, subtitle: { text: 'Source: tutsmake.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: chart }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); </script> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://127.0.0.1:8000/highchart |
