13-Apr-2023
.
Admin
Hi friends,
Today, I am explaining how to use highcharts in Laravel 10. In this article, I will show you highchart in Laravel 10. We will learn how to add highchart in Laravel 10. This tutorial demonstrates how to create charts in Laravel 10 with Highcharts. you will learn how to implement a highcharts in Laravel 10 using highchart js. Using highcharts you can create interactive charts easily for your web projects. so, now we will see a basic line chart using highcharts in Laravel 10.
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 dating application etc And need to show analytics on these application dashboards. So this Laravel 10 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 the following step.
composer create-project laravel/laravel example-app
Step 2: Add Route
first of all, we will create a simple route for creating a simple line chart. so let's add simple routes like below:
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 a new controller as HighchartController. so let's add the 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 a 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 10? - 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 10? - 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 the users table monthly wise.
you can create dummy records using laravel tinker command as below:
php artisan tinker
User::factory()->count(30)->create()
You need to create users each month with the created date as below screenshot:
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 the web browser, type the given URL and view the app output:
http://localhost:8000/chart
I hope it can help you...
#Laravel 10
