current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
    
Do you have a link between your javascript and php? (Like Ajax request ..) –  RaNdoM_PoWneD Mar 4 at 14:34
1  
Not currently. I tried a few different approaches but kept drawing blanks :-( –  PartyRichter Mar 4 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 –  RaNdoM_PoWneD Mar 4 at 14:41

1 Answer 1

up vote 0 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.