I want to show project name & hours on chart js using Laravel - laravel

Question

I am a beginner at Laravel I am trying to show project name and hours on the chart.js. Unfortunately, data is not showing on the chart; how can I show that?
controller
Chart script
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
#foreach($hour_logs as $key=>$value)
data: {
//labels: ['Red','Purple'],
labels: {{$value}},
datasets: [{
data: {{$value}},
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
#endforeach
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
return response
[
"Joylinkhk: 13,",
"HorizonTechnologies: 2,",
"Alahazrat: 9,",
"j2w: 0,"
]
on the left side project name and on the right side hours
dd($hour_logs)
array:4 [
0 => "Joylinkhk: 13,"
1 => "HorizonTechnologies: 2,"
2 => "Alahazrat: 9,"
3 => "j2w: 0,"
]

Answer 1

When passing complex data structures from PHP to JavaScript you will most likely want to be converting them to JSON.
You can convert arrays to JSON using json_encode(). If you are using Larvel collections, they can be converted using ->toJson().

Answer 2

Use Following code
You must send data from controller by parsing like this
implode(',', $label) and
implode(',', $value)
<script>
let label = {!! $label !!}
let value = {!! $value !!}
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
#foreach($hour_logs as $key=>$value)
data: {
//labels: ['Red','Purple'],
labels: label.split(','),
datasets: [{
data: value.aplit(,),
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
#endforeach
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>