Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create Controller ChartController
php artisan make:controller ChartController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller ChartController
app\Http\Controllers\ChartController.php
//app\Http\Controllers\ChartController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class ChartController extends Controller
{
public function index(){
$userData = User::select(DB::raw("COUNT(*) as count"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("Month(created_at)"))
->pluck('count');
return view('/chart', compact('userData'));
}
}
php artisan tinker User::factory()->count(25)->create()
C:\xampp\htdocs\laravel9\blog>php artisan tinker
Psy Shell v0.11.1 (PHP 8.0.13 — cli) by Justin Hileman
>>> User::factory()->count(20)->create()
[!] Aliasing 'User' to 'App\Models\User' for this Tinker session.
check database table user 25 dummy records added
highcharts
Simply Visualize
We make it easy for developers to create charts for web and mobile platforms.
For Javascript, Angular, React, VueJS, iOS, R, .NET, Python, and more.
https://www.highcharts.com/
resources/views/chart.blade.php
//resources/views/chart.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<title>Laravel Highcharts Example</title>
</head>
<body>
<center><h1>Laravel Highcharts Example</h1></center>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var userData = <?php echo json_encode($userData)?>;
Highcharts.chart('container', {
title: {
text: 'New User 2023'
},
subtitle: {
text: 'User'
},
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: userData
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
use App\Http\Controllers\ChartController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/chartuser', [ChartController::class, 'index']);
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
