Passing JSON data from PHP array into ChartJS

Question

So I have a PHP array created from data pulled from Advanced Custom Fields in WordPress:

<?php
  $chartArray = array();
  forEach($cat_meta as $key => $value) {
  $chartArray[] = array($value['star_rating']);
  }
  echo json_encode($chartArray);
?>

This outputs the following on the page:

[["2"],["4"],["1"],["3"],["5"]]

What I'm trying to do is get that result into the data variable of the ChartJS file:

var radarChartData = {
labels: ["Price", "Speed", "Format", "Size", "User Experience"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(224,07,19,1)",
        pointColor: "rgba(224,07,19,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(224,07,19,1)",
        data: [5, 4, 5, 5, 1, 3] // data needs to replace this
    }
]
};

var ctx = document.getElementById('RadarChart').getContext('2d');
var myRadarChart = new Chart(ctx).Radar(radarChartData);

I am a bit of a PHP / Javascript n00b so I'm hoping someone might be able to shed some light on this for me. Or maybe there is a better way of doing this? Thank you in advance.

Do you have a link between your javascript and php? (Like Ajax request ..) — Orelsanpls
– Orelsanpls, Commented Mar 4, 2015 at 14:34
Not currently. I tried a few different approaches but kept drawing blanks :-( — PartyRichter
– PartyRichter, Commented Mar 4, 2015 at 14:37
Look at this tutorials about $.ajax() which is a part of the javascript JQuery plugin. Using this you will call the Php page from your javascript page and then retrieve you array with data. When you will get your data in your javascript, here you will have to convert the array of array to a simple array of int :) Tutorial Here — Orelsanpls
– Orelsanpls, Commented Mar 4, 2015 at 14:41

ow3n · Accepted Answer · 2015-03-27 12:51:24Z

Store the JS object/data from the array as a string in PHP and print it.

<?php

// start script
$str = '<script>';
// start chart
$str .= 'var radarChartData = {';
// make labels
$str .= 'labels: [';
$delimiter = '';
foreach($chartArray as $key => $val){
    $str .= $delimiter.'"'.$key.'"';
    $delimiter = ', ';
}
// make dataset
$str .= '], datasets: [{';
$str .= 'label: "My First dataset", ';
$str .= 'fillColor: "rgba(220,220,220,0.2)", ';
$str .= 'strokeColor: "rgba(224,07,19,1)", ';
$str .= 'pointColor: "rgba(224,07,19,1)", ';
$str .= 'pointStrokeColor: "#fff", ';
$str .= 'pointHighlightFill: "#fff", ';
$str .= 'pointHighlightStroke: "rgba(224,07,19,1)",';
$str .= 'data: [';
$delimiter = '';
foreach($chartArray as $key => $val){
    $str .= $delimiter.$val;
    $delimiter = ', ';
}
$str .= ']}]};';
// end script
$str .= "</script>";
// print
print $str;

?>

<canvas id='RadarChart' class='chart' width='400px' height='400px'></canvas>

<script>
var ctx = document.getElementById('RadarChart').getContext('2d');
var polar_big5 = new Chart(ctx).Radar(radarChartData);
</script>

Collectives™ on Stack Overflow

Passing JSON data from PHP array into ChartJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related