Guide on showing Laravel variables as JSON in Laravel view with Charts.js

Question

Guide on showing Laravel variables as JSON in Laravel view with Charts.js

I am currently working on a project using Laravel 7 with MySQL and Charts.js. I'm facing an issue in echoing/displaying the data of two columns ("player_name" and "kills") from my MySQL database in JSON format. Typically, Laravel provides a @foreach loop for displaying data like this:

@php
    foreach($player_stats as $player) {
        echo "['".$player->player_name."', ".$player->kills."],";
    }
@endphp

However, I am unsure about how to incorporate this within my JavaScript/JSON code. Can someone help me out? Here is the error message I encounter along with the remaining parts of my code:

Error message:

Facade\Ignition\Exceptions\ViewException
Undefined variable: player_name (View: C:\wamp64\www\GeneralTesting\resources\views\show-players.blade.php)

... More sections of code go here ...

javascript mysql json laravel chart.js

Answer 1

Answer №1

Start by converting your outcome into the desired format

class PlayerController extends Controller
{
    public function playerStatistics() {
        $players = Player::all();
        $playerNames[] = $players->pluck('player_name');
        $playerKills[] = $players->pluck('kills');
        return view("show-players", compact(['playerNames', 'players', 'playerKills']));
    }
}

Next, use @json in your JavaScript code

<script >
var playerKillsData = @json($playerKills);

var kills = [playerKillsData];

var playerNamesData = @json($playerNames);

var names = [playerNamesData];

var canvas = document.getElementById('graphCanvas').getContext('2d');
var myChart = new Chart(canvas, {
    type: 'bar',
    data: {
        labels: 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>

Answer 2

Start by converting your outcome into the desired format

class PlayerController extends Controller
{
    public function playerStatistics() {
        $players = Player::all();
        $playerNames[] = $players->pluck('player_name');
        $playerKills[] = $players->pluck('kills');
        return view("show-players", compact(['playerNames', 'players', 'playerKills']));
    }
}

Next, use @json in your JavaScript code

<script >
var playerKillsData = @json($playerKills);

var kills = [playerKillsData];

var playerNamesData = @json($playerNames);

var names = [playerNamesData];

var canvas = document.getElementById('graphCanvas').getContext('2d');
var myChart = new Chart(canvas, {
    type: 'bar',
    data: {
        labels: 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>

Answer 3

Answer №2

I managed to avoid the loop and successfully implement the chart.js bar chart (some refactoring required)

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>

Answer 4

I managed to avoid the loop and successfully implement the chart.js bar chart (some refactoring required)

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>

Answer 5

Answer №3

Implement this code snippet in your controller:

dump($data);

Answer 6

Implement this code snippet in your controller:

dump($data);

Guide on showing Laravel variables as JSON in Laravel view with Charts.js

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble connecting to Docker? The webpage at localhost seems to be unresponsive and is not providing any data. Error: ERR_EMPTY_RESPONSE

issues with passing values on second click using ajax and jquery

Managing user roles in Nova with the help of Spatie Laravel Permissions

Exploring the concept of recursive method calls in TypeScript

Styling CSS according to the specific words found within the content

A guide to linking data retrieved from getJSON to state in ReactJS

Having trouble retrieving text using getText() or getAttribute("innerHTML")

A guide to quickly obtaining the width and height of an element as it resizes in Vue.js

Cloud Firestore trigger fails to activate Cloud function

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

What is the best way to retrieve a button's value upon clicking and display it in a React component?

Transform the JSON data into a Map containing key-value pairs of type String

Removing the empty option in a select element with ng-model

Merging rows with the highest and lowest IDs in MySQL

Troubleshooting the clonewithrows array problem in react-native

Combining JavaScript files into a single JavaScript file with Angular

Utilizing a PHP Class object in Javascript by accessing its properties within a Javascript function

What is the most efficient method to find a specific value in JSON within SQL when the path is unknown?

The concept of functions in JavaScript: fact or fiction?

Is it feasible to conceal a certain field once the user has chosen another field?