通过AJAX将数组传递给Google Charts API

I can grab the number of users who signed up a specific date by using:

我可以通过以下方式获取注册特定日期的用户数量:

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

Google Charts supplies the following JS function for drawing the graph

Google Charts提供以下用于绘制图形的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);
  }

How do I use my database query with data.addRows via ajax? Im stuck here..help is appreciated!

如何通过ajax将数据库查询与data.addRows一起使用?我卡在这里..非常感谢!

Thanks

1 个解决方案

#1

Here solved by using a test table * with one row, test_ (a timestamp) to mimick what you describe above :

这里通过使用带有一行的测试表*解决,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, which output will be fetched through AJAX :

googlechart.php,哪个输出将通过AJAX获取:

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

$SQL='SELECT COUNT(*) as c, DATE(time_) as date FROM * 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 (actual page) using jQuery AJAX and produces a google chart as described above :

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>

result :