How do I display the time (hh:mm) on the yaxis of a linechart?
Here is my code
protected function getData(): array
{
$data = Attendance::where('user_id', 1)
->where('attendance_month', '2023-06-01')
->orderBy('check_in')
->get()
->groupBy(function ($attendance) {
return Carbon::parse($attendance->check_in)->format('Y-m-d'); // Group by date
})
->map(function ($groupedAttendances) {
$firstCheckIn = $groupedAttendances->first()->check_in;
$timezone = config('app.user_timezone');
return Carbon::parse($firstCheckIn)->timezone($timezone)->format('Y-m-d H:i:s'); // Get the first check-in time of each day
})
->toArray();
$days = array_map(function ($value) {
return date('d', strtotime($value));
}, array_keys($data));
$times = array_map(function ($value) {
return date('h:i', strtotime($value));
}, array_values($data));
return [
'datasets' => [
[
'label' => 'User checkin time',
'data' => $times,
'borderColor' => 'rgb(61, 178, 106)',
'backgroundColor' => 'rgb(61, 178, 106)',
'borderWidth' => 2,
'tension' => 0.3,
'fill' => false,
'pointRadius' => 2,
'height' => 100
],
],
'labels' => $days
];
}
9 Replies
Here is the option configuration for the above code.
protected static ?array $options = [
'scales' => [
'y' => [
'type'=> 'linear',
'position'=>'left',
'ticks'=>[
'callback'=>function ($value) { return date('h:i', strtotime($value));}
],
]
],
'responsive' => true,
'maintainAspectRatio' => true,
'aspectRatio' => 2 / 1,
'plugins' => [
'legend' => [
'display' => true,
'labels' => [
'padding' => 0,
'usePointStyle' => true,
'pointStyle' => 'circle',
'color' => '#15C253',
'boxHeight' => 4,
'font' => [
'style' => 'normal',
'weight' => 500,
'size' => 16,
'lineHeight' => 16
]
]
],
'tooltip' => [
'usePointStyle'=> true,
],
],
];
The callback not called and showing Constant expression contains invalid operations.
please read the #✅┊rules on how to post code.
you need to wrap it in 3 x ` and php
Gist
How do I display the time (hh:mm) on the yaxis of a linechart?
How do I display the time (hh:mm) on the yaxis of a linechart? - CheckInLineChart.php
Please provide me with a solution. How can I display the time on the yaxis?
I think the callback option in ticks doesn't work because it can't convert php to javascript. So best option is to format the data to H:i format
I converted the data to H:i format, however it still does not work.The time format is completely visible on the xaxis but not on the yaxis.
Here is the updated config option.
Here is my chart view but I want to display the time in y-axis.
If you want time in y axis and data in x axis you got the series wrong way around
I attempted to use the time series, but it was unable to display the time in H:i format. it displays the number; however, when I convert the time to minutes, it displays in the yaxis; but, when I format it using ticks:callback The format is not displayed.
Please assist me.