CODEWITHSUNDEEP
javascriptphpcharts
JeremyRenner2
JeremyRenner2

Reputation: 61

PHP Array seen as single element in Chartjs

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?

Upvotes: 0

Views: 99

Answers (1)

Dark Knight
Dark Knight

Reputation: 6531

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,
      }]
    },

Upvotes: 1

Related Questions