Dec 12, 2022
0
Level 2
Chart.js
Hi Iam trying to insert a chart by the use of chart.js. I followed the steps in their website I got this drawing: https://i.stack.imgur.com/W7QNn.png The problem is that the user's data represented right but the other data jobs, jobseekers and consultants are not. the Mistak is in the months. although jobs were created in 10 it shows 8. This is the controller:
public function statistics()
{
$users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("month_name"))
->orderBy('id','ASC')
->pluck('count', 'month_name');
$labels = $users->keys();
$data = $users->values();
$jobs = Job::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("month_name"))
->orderBy('id','ASC')
->pluck('count', 'month_name');
$labels1 = $jobs->keys();
$data1 = $jobs->values();
$Jobseeker = cv::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("month_name"))
->orderBy('id','ASC')
->pluck('count', 'month_name');
$labels2 = $Jobseeker->keys();
$data2 = $Jobseeker->values();
$Consult = Consult::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("month_name"))
->orderBy('id','ASC')
->pluck('count', 'month_name');
$labels3 = $Consult->keys();
$data3 = $Consult->values();
return view('statistics.report',compact('users1','consultants','jobsekers','jobs1','labels','data','labels1','data1','labels2','data2','labels3','data3'));
}
This is my script:
<script type="text/javascript">
var labels = {{ Js::from($labels) }};
var users = {{ Js::from($data) }};
var labels1 = {{ Js::from($labels1) }};
var jobs = {{ Js::from($data1) }};
var labels2 = {{ Js::from($labels2) }};
var Jobseeker = {{ Js::from($data2) }};
var labels3 = {{ Js::from($labels3) }};
var Consult = {{ Js::from($data3) }};
const data = {
labels: labels,
labels1: labels1,
labels2: labels2,
labels3: labels3,
datasets: [
{
label: ['Users'],
data: users,
borderColor: '#2db5b5',
backgroundColor: '#2db5b5',
},
{
label: ['Jobs'],
data: jobs,
borderColor: '#0024ff',
backgroundColor: '#0024ff',
}, {
label: ['Jobseeker'],
data: Jobseeker,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: ['Consultants'],
data: Consult,
borderColor: '#ffaf00',
backgroundColor: '#ffaf00',
},
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Website statistics'
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
I think the source of error is the script, cause when I put dd for variables it shows right months
Please or to participate in this conversation.