通過AJAX

Question

將數組傳遞給谷歌圖表API我可以搶誰使用簽約的具體日期用戶數：

$query = "SELECT COUNT(*), DATE(FROM_UNIXTIME(time)) as date 
    FROM user GROUP BY DATE(FROM_UNIXTIME(time))"; 

谷歌圖表提供了以下JS函數圖形繪製

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Day'); 
    data.addColumn('number', 'Users'); 
    data.addRows([ 
     ['03-22-2012', 1000], 
     ['03-23-2011', 1170] 
    ]); 

    var options = { 
     title: 'Signups' 
    }; 

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

如何使用我的數據庫查詢data.addRows通過ajax？我卡在這裏..幫助表示讚賞！

感謝

Answer 1

這裏使用一個測試表stackoverflow一個排，test_（時間戳）來模擬天生你描述上述解決：

time_ 
------------------- 
2013-07-07 13:23:31 
2013-07-07 13:23:44 
2013-07-09 13:23:50 
2013-07-08 13:23:57 
2013-07-09 13:24:07 
2013-07-09 13:24:14 

googlechart.php，其輸出將通過中獲取AJAX：

<? 
mysql_connect('localhost','root','xxx'); 
mysql_select_db('test'); 

$SQL='SELECT COUNT(*) as c, DATE(time_) as date FROM stackoverflow GROUP BY DATE(time_)'; 
$result=mysql_query($SQL); 

$a = array(); 
$a['cols'][] = array('type' => 'string', 'label' => 'Day'); 
$a['cols'][] = array('type' => 'number', 'label' => 'Users'); 
while($row = mysql_fetch_assoc($result)) { 
    $a['rows'][]['c']=array(
     array('v' => $row['date']), 
     array('v' => $row['c']) 
    ); 
} 
echo json_encode($a); 
?> 

googlechart.html使用jQuery AJAX（實際頁），併產生一個谷歌的圖表如上所述：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script> 
<script type="text/javascript"> 
function drawChart(json) { 
    var data = new google.visualization.DataTable(json); 
    var options = { 
     title: 'Signups' 
    }; 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
    $(document).ready(function() { 
     $.ajax({ 
     url: 'googlechart.php', 
     success : function(json) { 
      drawChart(json); 
     } 
    }); 
    }); 
</script> 

<div id="chart_div" style="width:500px;height:400px;"></div> 

結果：