1๐
โ
Try mapping your result in the format you want first
class PlayerController extends Controller
{
public function playerstats() {
$players = Player::all();
$player_names = $players->pluck('player_name');
$player_kills = $players->pluck('kills');
return view("show-players", compact(['player_names', 'players', 'player_kills']));
}
}
Then simple @json
it on the javascript
<script >
var player_kills = @json($player_kills);
var kills = [player_kills];
var player_names = @json($player_names);
var p_names = [player_names];
var ctx = document.getElementById('graphCanvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: p_names[0],
datasets: [{
label: 'player name',
data: kills[0],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
๐:0
I avoided the loop but got the chart.js bar chart to work correctly (refactoring needed)
Controller (PlayerController.php):
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Player;
class PlayerController extends Controller
{
public function playerstats() {
// $players = Player::all();
$players = Player::all()->toArray();
$player_kills = array_map(function($player) {
return $player['kills'];
}, $players);
$player_names = array_map(function($player) {
return $player['player_name'];
}, $players);
// return view("show-players", compact("player_stats"));
return view("show-players", compact(['player_kills',
'players',
'player_names']));
}
}
View (show-player.blade.php)
<script >
var player_kills = @json($player_kills);
// console.log(player_kills);
var kills = [player_kills];
var player_names = @json($player_names);
// console.log(player_names);
var p_names = [player_names];
var ctx = document.getElementById('graphCanvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: p_names[0],
datasets: [{
label: 'player name',
data: kills[0],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
๐:-2
use this in your controller:
dump($variable);