I am querying wordpress ACF fieldsdata which needs to plot into a chart.js radar type chart.

<?php
// Query posts
$args = array(
    'post_type' => 'resultaten',
    'tax_query' => array(
    'relation' => 'AND',
        array(
            'taxonomy' => 'cursus',
            'field' => 'slug',
            'terms' => 'vitaliteitsscan'
        ),
        array(
            'taxonomy' => 'client',
            'field' => 'name',
            'terms' => 'Bedrijf b',
        ),
    ),
  'posts_per_page' => -1,
  'orderby' => 'date',
  'order' => 'DESC',
);
$query = new WP_Query( $args );
$total = $query->found_posts;
//echo $total;

// Set empty array for dataset
$row = array();

if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
      
// Here we have the ACF fields per post (it's a form) results of calculation is a number   
$autonomie = 
((get_field( 'vitaliteit_stelling_1')  
get_field( 'vitaliteit_stelling_2')   
get_field( 'vitaliteit_stelling_3')  
get_field( 'vitaliteit_stelling_4'))/4);

$competentie =      
((get_field( 'vitaliteit_stelling_5')  
get_field( 'vitaliteit_stelling_6')   
get_field( 'vitaliteit_stelling_7')  
get_field( 'vitaliteit_stelling_8'))/4);      

$verbondenheid =      
((get_field( 'vitaliteit_stelling_9')  
get_field( 'vitaliteit_stelling_10')   
get_field( 'vitaliteit_stelling_11')  
get_field( 'vitaliteit_stelling_12'))/4);  

$vrijheid =      
((get_field( 'vitaliteit_stelling_13')  
get_field( 'vitaliteit_stelling_14')   
get_field( 'vitaliteit_stelling_15')  
get_field( 'vitaliteit_stelling_16'))/4); 

$welbevinden =      
((get_field( 'vitaliteit_stelling_17')  
get_field( 'vitaliteit_stelling_18')   
get_field( 'vitaliteit_stelling_19')  
get_field( 'vitaliteit_stelling_20'))/4);

$energie =      
((get_field( 'vitaliteit_stelling_21')  
get_field( 'vitaliteit_stelling_22')   
get_field( 'vitaliteit_stelling_23')  
get_field( 'vitaliteit_stelling_24'))/4); 

// Construct the dataset array
$row[] = 
      array(
      'label' => "Uitslag",
      'backgroundColor' => "rgba(146,196,213,0.2)",
      'data' => "$autonomie, $competentie, $verbondenheid, $vrijheid, $welbevinden, $energie",
      );
    }
}

wp_reset_postdata();

//echo print_r($row);
$work = json_encode($row); 
//echo $work;
?>

<script>  
var marksCanvas = document.getElementById("myChart");

var marksData = {
  labels: ["Autonomie", "Competentie", "Sociale verbondenheid", "Fysieke vrijheid", "Emotioneel welbevinden", "Energie"],
 // Now here i want the above array to output the retrieved data in the below format
 datasets: [{
    label: "Uitslag",
    backgroundColor: "rgba(146,196,213,0.2)",
    data: 
     [49.75, 51, 23.5, 48.25, 27.5, 61.75],
  },
  {
    label: "Uitslag",
    backgroundColor: "rgba(146,196,213,0.2)",
    data: 
     [69.75, 21, 73.5, 68.25, 37.5, 11.75],
  }], 
};
// This plots the chart on the canvas
var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData,
   options: {
        scales: {
            r: {
                suggestedMin: 0,
                suggestedMax: 100
            }
        }
    }
});

</script>

The array output i get with the above code is:

[{"label":"uitslag","backgroundColor":"rgba(146,196,213,0.2)","data":"49.75, 51, 23.5, 48.25, 27.5, 61.75"},{"label":"uitslag","backgroundColor":"rgba(146,196,213,0.2)","data":"50.25, 43.5, 39.25, 55.5, 25.5, 33.5"}]

Which needs to become

[{label:"uitslag",backgroundColor:"rgba(146,196,213,0.2)",data:[49.75, 51, 23.5, 48.25, 27.5, 61.75]},{label:"uitslag",backgroundColor:"rgba(146,196,213,0.2)",data:[50.25, 43.5, 39.25, 55.5, 25.5, 33.5]}]

Pulling my hair out (and i have none :-p) how to get rid of the double quotes in the json_encode. A small donation for a ready to implement solution is possible as these parts take me too much time from completing the total website.

Joep

CodePudding user response：

The issue is, that you are constructing the data property of the $row[] as string and not as an array. See below, how to fix this issue:

...
$row[] = 
    array(
        'label' => "Uitslag",
        'backgroundColor' => "rgba(146,196,213,0.2)",
        'data' => array($autonomie, $competentie, $verbondenheid, $vrijheid, $welbevinden, $energie)
    );
 ...

Then the json should be constructed correct, and the chart should work.

Tipp: Just construct your desired data - structure, in the usual PHP fashion (as needed), and than pass it to the function json_encode. It will do the heavy lifting, of converting it into valid json.