Passing an array of Google Chart APIs through AJAX

Question

I can capture the number of users who signed a specific date using:

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

Google Graphics introduces the following JS function for drawing graphics

 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 to use my database query using data.addRows via ajax ? I'm stuck here ... thanks!

thanks

Answer 1

Here it is solved using a stackoverflow test table with a single line, test_ (timestamp), to match what you described above:

 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, the output of which will be obtained through 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 (actual page) using jQuery AJAX and creates a google diagram as described above:

 <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 :