PHP JSON到Google Chart API

Question

I'm having trouble parsing my php generated json array to a google chart. I have included Jquery, but some how i can't figure out how to parse my json data. I run a MySQL query to retrieve data from the database. Then i encode the query result with php json_encode.

I use ajax to get the json data from my php file.

getData.php:

<?php
function get_meta_values( $key, $type = 'workout', $status = 'publish' ) {
  global $wpdb;
  $user_ID = get_current_user_id();

  if ( empty( $key ) )
    return;

  $r = $wpdb->get_results(
    $wpdb->prepare( "
      SELECT pm.meta_value, p.post_date FROM {$wpdb->postmeta} pm
      LEFT JOIN {$wpdb->posts} p ON p.ID = pm.post_id
      INNER JOIN $wpdb->term_relationships
      ON (p.ID = $wpdb->term_relationships.object_id)
      INNER JOIN $wpdb->term_taxonomy
      ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
      WHERE pm.meta_key = '%s' 
      AND $wpdb->term_taxonomy.taxonomy = 'category'
      AND $wpdb->term_taxonomy.term_id IN (4)
      AND p.post_status = '%s' 
      AND p.post_type = '%s'
      AND p.post_author = $user_ID
      ORDER BY pm.meta_value DESC ",
    $key,
    $status,
    $type));

    if ( $r ) {
      $user_ids = wp_list_pluck( $r, 'post_date' );
      cache_users( $user_ids );
    }

    return $r;
}
$workout_history = get_meta_values( '1_rep', 'workout' );
echo json_encode($workout_history);

?>

The page that holds the chart:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", { packages: ["corechart"] });
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var jsonData = $.ajax({
      url: "http://localhost:41175/wp-content/themes/wordpress-bootstrap-master/getData.php",
      dataType: "json",
      async: false
    }).responseText;

  var obj = window.JSON.stringify(jsonData);
  var data = google.visualization.arrayToDataTable(obj);

  var options = {
    title: 'Test'
  };

  var chart = new google.visualization.LineChart(
  document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

When i try to echo my json file it looks like this:

[
  {
    "meta_value":"999",
    "post_date":"2014-04-12 18:21:51"
  },
  {
    "meta_value":"1",
    "post_date":"2014-04-12 18:58:20"
  }
] 

Any suggestions to what i am doing wrong?

Answer 1

https://developers.google.com/chart/interactive/docs/reference#google.visualization.arraytodatatable

Seems that your JSON dataset is incorrect for use with that method. It should be (in javascript):

var data = [
    ['metavalue', 'post_date'],
    ['999', '2014-04-12 18:21:51'],
    ['1', '2014-04-12 18:58:20']
]

which in JSON equals to:

[["metavalue","post_date"],["999","2014-04-12 18:21:51"],["1","2014-04-12 18:58:20"]]

As I have no clue where $workout_history is coming from I can't help you out with how get to that.