PHP Array seen as single element in Chartjs

Question

I have two arrays in PHP which I am trying to pass to a Chart to be displayed in Chartjs.

The following code creates the arrays by using a foreach on a multidimensional array to extract them.

<?php
    $behaviours = orderByType($_SESSION['loggedStudent']['studentID']);
    $behTypes = array();
    $behValues = array();
    foreach($behaviours as $item){
        $behTypes[] = $item["type"];
        $behValues[] = intval($item["count(*)"]);
    }
    // php arrays to JSON
    $behaviourLabels = json_encode($behTypes, TRUE); 
    $behaviourValues = json_encode($behValues, TRUE);
?>

<canvas id="pie-chart" width="800" height="450"></canvas>

<script>
// parse to js
var strLables = <?php echo($behaviourLabels); ?>;
var strValues = <?php echo($behaviourValues); ?>;

// parse as array
var arrLables = JSON.parse($strLables);
var arrValues = JSON.parse($strValues);

new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: arrLabels,
      datasets: [{
        label: "Incident Type",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: arrValues,
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Breakdown of incident types for <?php echo($_SESSION['loggedStudent']['firstName']);  ?>'
      }
    }
});

</script>

No chart or labels are showing. What am I doing wrong?

Dark Knight · Accepted Answer · 2020-09-26 07:23:48Z

1

The expected values for both data and labels are array.

What you need to do is pass json to JavaScript.

// php arrays to JSON
$behaviourLabels = json_encode($behTypes);
$behaviourValues = json_encode($behValues);

Now in javascript

var arrLables = <?php echo($behaviourLabels); ?>;
var arrValues = <?php echo($behaviourValues); ?>;

// Now use them directly in you configuration
data: {
      labels: arrLables,
      datasets: [{
        label: "Incident Type",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: arrValues,
      }]
    },

edited Sep 26, 2020 at 7:23

answered Sep 26, 2020 at 6:37

Dark Knight

6,6211 gold badge22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Dark Knight Over a year ago

first section was php code not javascript and in second we're passing value from php variable to javascript variable.

Dark Knight Over a year ago

oh i'm really sorry that is wrong, i mistakenly did that. Updated my answer. and verify whether you're getting data in strLables and strValues by using console.log(strLables, strValues)

Dark Knight Over a year ago

try enclosing them into a double quote.

Dark Knight Over a year ago

see this var strLables = "<?php echo($behaviourLabels); ?>"; and its below line. both are now enclosed in double quote. Let me know if it works or not

Dark Knight Over a year ago

may be you're getting error due to double quote. Let me give you one more subtle solution. Give me some time

|

Collectives™ on Stack Overflow

PHP Array seen as single element in Chartjs

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related