2012-05-22 84 views
1

我正在嘗試使用從MySQL獲取信息的PHP文件製作餅圖,JSON對其進行編碼,然後將其發送到我的JS文件以製作餅圖。我看過大部分在這裏發佈的其他問題,而他們都沒有幫助我。我試圖重新編寫我的代碼來匹配似乎合適的代碼,但沒有任何工作。
我的PHP文件是:使用php,ajax和jqplot製作餅圖

$shelvDate = $_POST['shelvDate']; 
$x = 0; 

// get information from database for shelving chart 
$shelv = $conn -> query ("SELECT sum(quantity) as qty, date_process, created_by, first_name from inventory LEFT JOIN users on users.user_id =inventory.created_by 
    WHERE date_process = '$shelvDate' GROUP BY created_by"); 
$num_rows = $shelv->num_rows; 

if($num_rows > 0){ 
    while($row = $shelv->fetch_assoc()) { 
     if($row['qty'] > 0){ 
      $qtyArray[$x] = $row['qty']; 
      $nameArray[$x] = $row['first_name']; 
     } 
     $x++; 

     $pairs = array('first_name' => $nameArray, 'qty' => $qtyArray); 
    } // end of while statement 
} //end of if statement 

$conn->close(); 
echo json_encode(array($pairs)); 

當我嘗試將數據進入我ajax/js我得到一個錯誤。我JS是:

$("#getRecords").live('click', function() { 
    var ajaxDataRenderer = function(url, plot, options) { 
     var ret = null; 
     $.ajax({ 
      type: "POST", 
      async: false, 
      url: url, 
      dataType:"json", 
      data: ({shelvDate: $('#shelvDate').val()}), 
      success: function(data) { 
       for(var x=0; x<data.first_name.length; x++) { 
        var info = [data.first_name[x], data.qty[x]]; 
        ret.push(info); 
       } 
     }); // end of ajax call 

     return ret; 
    }; // end of ajaxDataRenerer call 

    // The url for our json data 
    var jsonurl = "shelvChart.php"; 
    var plot2 = $.jqplot('shelvChart', jsonurl,{ 
    seriesDefaults: { 
      // Make this a pie chart. 
      renderer: jQuery.jqplot.PieRenderer, 
      rendererOptions: { 
       // Put data labels on the pie slices. 
       // By default, labels show the percentage of the slice. 
       showDataLabels: true 
      } 
     }, 
     title: "Books Shelved", 
     dataRenderer: ajaxDataRenderer, 
     dataRendererOptions: { 
      unusedOptionalUrl: jsonurl 
     } 
    }); 
}); 

我不知道我做錯了,甚至從這裏到去,因爲我還是新的AJAX和JS。任何幫助將不勝感激。
吉姆

+0

什麼是執行console.log(數據)的'結果;''的成功裏面:功能(數據){}' –

+0

如果我添加在成功的提示框:功能(數據) ,我得到名字[對象,對象],數量[對象,對象]。 – Jim

回答

1

這將是看到一個真正的JSON字符串你得到非常有用的,因爲我不知道你怎麼能調用alert(ret)後得到name[object,object],qty[object,object]也許你指的是其它警報?

無論如何,你所說的問題是,你必須確保由ajaxDataRenderer函數返回的數組具有餅圖接受的正確格式。

因此,例如,您PHPJavaScript代碼裏面,你需要確保返回的數組ret是以下格式:

ret = [[name[0], qty[0]], [name[1], qty[1]], ...]; 

這種方式是在名稱數組中的所有值將被使用因爲標籤和數量數組將用作評估百分比的值。

Similar approach that shows how to prepare data for a chart is shown in this answer.

+0

完成一些調試後,我能夠從我的mysql查詢中獲得一些實際數據。現在在alert(ret)中,我得到:first_name,Mike,Cory,Doug,Pond,Santos,數量,471,80,101,59,46。我雖然json應該以[]形式格式化這些信息。我現在看看你的例子,看看它對我有什麼意義。謝謝您的幫助。 – Jim

+0

我用你的代碼示例部分的代碼示例,現在得到我的警報格式爲:邁克,471,cory,80等..但我仍然沒有得到它繪製在我的圖表上。有什麼建議麼? – Jim

+0

請提供顯示您的問題的jsfiddle。如果沒有看到實際的代碼,我不太確定那裏有什麼問題。另外我的建議是在'ret'數組中包含一個[name,qty]對的數組。 – Boro