來自MySQL的Google圖表JSON編碼陣列

Question

我在這裏有一段時間，我怎樣才能從json_encoded mySQL數組中繪製圖表？

數據檢索（從PDO查詢簡單地相關聯的陣列）：

if($cCt > 0){ 
     header('Content-Type:application/json');  
     $table['cols'] = array(
           array('id'=>'Date', 'label'=>'Date', 'type'=>'string'), 
           array('id'=>'Carbs', 'label'=>'Carbs', 'type'=>'number'), 
           array('id'=>'Sugar', 'label'=>'Sugar', 'type'=>'number'), 
           array('id'=>'Units', 'label'=>'Units', 'type'=>'number')); 
     for($i=0; $i<$cCt; ++$i){ 
      $W = (isset($_GET['which'])) ? (int)$_GET['which'] : 0; 
      switch($W){ 
       case 1: // weekly 
       case 2: // monthly 
       case 3: // yearly 
        $date = date('m/d', strtotime($CNums[$i]['Date'])); 
        break; 
       case 4: // daily 
        $date = date('m/d g:i a', strtotime($CNums[$i]['Date'])); 
        break; 
       default: 
        $date = date('m/d g:i a', strtotime($CNums[$i]['Date'])); 
        break; 
      } 
      $rows[] = array('c'=>array('v'=>$date, 'v'=>$CNums[$i]['Carbs'], 'v'=>$CNums[$i]['Sugar'], 'v'=>$CNums[$i]['Units'])); 
     } 
     $table['rows'] = $rows; 
     echo json_encode($table, JSON_NUMERIC_CHECK); 
    }else{ 
     echo ErrorBox('Please login to see your charts.'); 
    } 

代碼嘗試：

<script type="text/javascript"> 

    google.load('visualization', '1.0', {'packages':['corechart']}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var $dUrl = "/assets/php/charts/chart.data.php?_=<?php echo time(); ?>&which=<?php echo (isset($which)) ? $which : 4; ?>&d=<?php echo (isset($d)) ? $d : null; ?>&dl=<?php echo (isset($dl)) ? $dl : null; ?>"; 

     jQuery.getJSON($dUrl, function(d){ 
      // Create a new blank DataTable   
      var data = new google.visualization.DataTable(d); 
      // Create our columns 
      /* 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Carbs'); 
      data.addColumn('number', 'Sugar'); 
      data.addColumn('number', 'Units'); 
      // Create our Rows 
      jQuery.each(d, function(i) { 
       data.addRows([d[i].Dates, d[i].Carbs, d[i].Sugar, d[i].Units]); 
      }); 
      */  
      var options = { 
       'colors': ['red', 'blue', 'yellow'], 
       'width': '98%', 
       'height': 280, 
       'backgroundColor': 'none', 
       'hAxis': {'textStyle': {fontName: 'Calibri', 
        fontSize: '12'}}, 
       'vAxis': {'textStyle': {fontName: 'Calibri', 
        fontSize: '12'}}, 
       'legendTextStyle': {fontName: 'Calibri', 
        fontSize: '12'} 
      }; 
      //var chart = new google.visualization.ColumnChart(document.getElementById('<?php echo $where; ?>')); 
      var chart = new google.visualization.ColumnChart(document.getElementById('weekly_chart_div')); 
      chart.draw(data, options); 

     }).fail(function(msg){console.log('Error pulling in the data.' + msg);}); 

    } 
</script> 

原始JSON從$dUrl：

{"cols":[{"id":"Date","label":"Date","type":"string"}, 
    {"id":"Carbs","label":"Carbs","type":"string"}, 
    {"id":"Sugar","label":"Sugar","type":"string"}, 
    {"id":"Units","label":"Units","type":"string"}], 
"rows":[["08\/23","40.0000000","256.0000000","9.0000000"], 
    ["08\/24","33.8333333","102.5000000","4.6666667"], 
    ["08\/25","38.2000000","290.2000000","10.6000000"], 
    ["08\/26","36.0000000","322.0000000","12.0000000"], 
    ["08\/28","23.6666667","348.3333333","9.6666667"], 
    ["08\/29","31.3333333","214.1666667","7.3333333"], 
    ["08\/30","16.0000000","154.0000000","4.0000000"]]} 

新數據後JSON檢索更新：

{"cols":[{"id":"Date","label":"Date","type":"string"}, 
    {"id":"Carbs","label":"Carbs","type":"number"}, 
    {"id":"Sugar","label":"Sugar","type":"number"}, 
    {"id":"Units","label":"Units","type":"number"}], 
"rows":[{"c":{"v":9}},{"c":{"v":4.6666667}},{"c":{"v":10.6}},{"c":{"v":12}},{"c":{"v":9.6666667}},{"c":{"v":7.3333333}},{"c":{"v":4}}]} 

是的，現在我得到一個錯誤this.J[a].c is undefined，但它只顯示了圖應加載...不螢火

我所瞄準的是這樣的： 例如：http://o7th.com/Image3.png

Answer 1

您的行格式不正確。行是一個對象數組，其中每個對象都有一個「c」（單元格數組）和一個可選的「p」（屬性對象）參數。單元格數組是具有「v」（列數據類型，單元格的值）和可選的「f」（字符串，格式化的單元格值）和「p」（參數對象）屬性的對象數組。

舉個例子，你的第一行數據應該是這樣的：

{"c":[{"v":"08\/23"},{"v":40,"f":"40.0000000"},{"v":256,"f":"256.0000000"},{"v":9,"f":"9.0000000"}]} 

爲了產生從JSON編碼的PHP數組，數組必須是這樣的：

$row = array(
    'c' => array(
     array('v' => '08\/23'), 
     array('v' => 40, 'f' => "40.0000000"), 
     array('v' => 256, 'f' => "256.0000000"), 
     array('v' => 9, 'f' => "9.0000000") 
    ) 
); 

默認情況下，它輸出的所有號碼爲字符串，所以你需要投他們作爲整數或爲了漂浮他們要爲數字輸出，就像這樣：

$foo = '33.333333'; // $foo == '33.333333' 
$bar = (int) $foo; // $bar == 33 
$cad = (float) $foo; // $cad == 33.333333 

如果您不需要它們（它們將出現在圖表的工具提示中），您可以更改或刪除格式化的值。

編輯：

您需要給每個單元格在單元格數組中它自己的數組;試試這個：

$rows[] = array(
    'c'=>array(
     array('v'=>$date), 
     array('v'=>$CNums[$i]['Carbs']), 
     array('v'=>$CNums[$i]['Sugar']), 
     array('v'=>$CNums[$i]['Units']) 
    ) 
);