2014-09-02 61 views
0

我有職員表中的MySQL數據庫 表的列.. EMPNO 的ename 薩爾...等 我創建自定義查詢頁面..用戶將在textarea中鍵入查詢,然後單擊提交按鈕..我想根據用戶請求的列從MySQL中檢索數據,並希望顯示谷歌圖表表格。如何讀寫從MySQL數據,JSON,然後使用谷歌表圖表

我通過JSON嘗試,但沒有運氣

下面的代碼是我做了什麼......

<form action="fire.php" id="usrform" method="post" target="iframe1"> 
    <p> Enter custom query here...</p> 
    <textarea name="query" form="usrform" wrap="hard soft" cols="60" rows="10"></textarea>     <br> 
    <input type="submit" value="Fire Query"> 
</form> 

消防PHP頁面...

$con = mysqli_connect($db_host,$db_username,$db_pass) or die ("could not connect to mysql"); 

mysqli_select_db($con,$db_name) or die ("no database"); 
//query all records from the database 
$query=$_POST['query']; 
$returnArray = array(); 
$result = mysqli_query($con,$query); 
while($rs = mysqli_fetch_array($result, MYSQL_ASSOC))  
{  
$returnArray[] = $rs;  
} 
$fp = fopen('sampledata.json', 'w+'); 
fwrite($fp, json_encode($returnArray)); 
fclose($fp); 
} 
?> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
      <script type="text/javascript"> 

      // Load the Visualization API and the piechart package. 
      google.load('visualization', '1', {'packages':['table']}); 

      // Set a callback to run when the Google Visualization API is loaded. 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var jsonData = $.ajax({ 
        url: "getdata.php", 
        dataType:"json", 
        async: false 
        }).responseText; 

       // Create our data table out of JSON data loaded from server. 
       var data = new google.visualization.DataTable(jsonData); 

       // Instantiate and draw our chart, passing in some options. 
       var chart = new google.visualization.Table(document.getElementById('chart_div')); 
       chart.draw(data, {width: 700, height: 400}); 
      } 
      </script> 
      <div id="chart_div"></div> 
      </html> 

訪問getdata.php

<?php 
$string = file_get_contents("sampledata.json")`enter code here`; 
echo $string; 
?> 

請指教如我沒有收到表的圖表

回答

0

嘗試改變

var jsonData = $.ajax({ 
       url: "getdata.php", 
       dataType:"json", 
       async: false 
       }).responseText; 

在喜歡的東西

var jsonData; 
var request = $.ajax({ 
    url: "getdata.php", 
    dataType:"json", 
    async: false, 
    type: "GET" 
}); 

request.done(function(msg) { 
    jsonData = $.parseJSON(msg.d); 
    var data = new google.visualization.DataTable(jsonData); 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.Table(document.getElementById('chart_div')); 
    chart.draw(data, {width: 700, height: 400}); 
}); 

,它會建議增加一個功能,用JSON也許調用圖表數據參數。