Highcharts js is a simple JavaScript library. Which is very easy to use. Using this you can create pie charts, line charts, bar charts, graph charts and etc charts in Laravel 10 application.
Hightcharts in laravel 10 apps; In this tutorial, you will learn how to create any types of chart(pie, line, bar, graph & stack) using highcharts in Laravel 10 apps.
How to add charts in Laravel 10 using Highcharts
By using the following steps, you can create pie charts, line charts, bar charts and etc charts in Laravel 10 application.
- Step 1: Define Routes
- Step 2: Create a Controller
- Step 3: Create Blade File
- Step 4: Run Development Server
Step 1: Define Routes
In the first step, you need to create routes for highchart.
So go to routes/web.php and update the below route in your file:
<?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']);
Recommended Post
Laravel Get Record Last Week, Month, 7 or 15 Days, YearStep 2: Create a Controller
In this step, execute the following command on cmd or terminal to create a new controller name HighChartController.php:
php artisan make:controller HighChartController
Once you have created the controller file. Now you need to add the following code into HighChartController.php, which is located on app/Http/Controller directory:
<?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'));
}
}
Recommended Post
Laravel Get Current Date, Week, Month Wise, YEAR DataStep 3: Create Blade File
In this step, create a blade view file name highchart.blade.php. So go to the resources/views/ and update the below javascript and HTML code for displaying the highchart:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Highcharts Example - Tutsmake.com</title>
</head>
<body>
<h1>Laravel 10 Highcharts Example - Tutsmake.com</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>
Note: Don’t forget to include the highchart js libraries on your blade view file and you can add or remove this library according to your requirement.
<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>
Or also don’t forget to add this javascript code. The highchart library also provides so many options for the highchart. You can change or modify according to your requirement:
<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>
Step 4: Run Development Server
Open the terminal and execute the following command to start the development server:
php artisan serve
Then open a browser and fire the below-given URL on it:
http://127.0.0.1:8000/highchart
