Ajax / JSON Redrawing google chart - ajax

Question

Im using the google visualization chart api here: https://developers.google.com/chart/interactive to make a server uptime graph which seems to be working nicely.
However I want the users to be able to select a date range and then redraw the graph without having to refresh the browser. And I have a small problem with this.
I first draw the graph with the initial data, and then if a user changes the date range this graph should be redrawn. I tried redrawing with some sample data and this works fine. However I cant seem to get it to work with the updated data.
Now in the php file where i fetch the data from the DB i return both the average uptime for this period as well as the total uptime for the period as such:
/*mysql query striped*/
$uptime_result = mysql_query($query, $connection) or die(mysql_error());
$uptime_data = "['Day', 'Uptime'],";
while ($items = mysql_fetch_array($uptime_result)){
$uptime_data.="['{$items['date']}',{$items['uptime']}], ";
}
// get average uptime
/*mysql query striped*/
$uptime_result = mysql_query($query, $connection) or die(mysql_error());
$result_array = mysql_fetch_array($uptime_result);
$avg_uptime = round($result_array['AVG(uptime)'],2);
echo "{\"data\":\"{$uptime_data}\",\"average\":$avg_uptime}";
Which outputs something like:
{"data":"['Day', 'Uptime'],['2012-05-31',100.00], ['2012-06-01',100.00], ['2012-05- 22',99.65], ['2012-05-21',99.65], ['2012-05-20',100.00], ['2012-05-31',100.00], ['2012-05-30',100.00], ['2012-05-29',100.00], ['2012-05-28',100.00], ['2012-05-27',100.00], ['2012-05-26',100.00], ['2012-05-25',100.00], ['2012-05-24',100.00], ['2012-05-23',100.00], ['2012-05-19',100.00], ['2012-05-18',100.00], ['2012-05-17',100.00], ['2012-05-16',100.00], ['2012-05-15',100.00], ['2012-05-14',100.00], ['2012-05-13',100.00], ['2012-05-12',100.00], ['2012-05-11',100.00], ['2012-05-10',100.00], ['2012-05-09',100.00], ['2012-05-08',100.00], ['2012-05-07',100.00], ['2012-06-02',100.00], ['2012-06-03',100.00], ['2012-06-04',100.00], ","average":99.98}
I.e a JSON array with two variables data and average. I am able to fetch the two independently as such:
$(function(){
$('#from,#to').focusout(function(){
var start=$('#from').val();
var end=$('#to').val();
$.ajax({
type: 'POST',
data: ({from : start, to : end, id : <?php echo $id; ?>}),
url: 'fetchuptime.php',
success: function(data) {
//7 reulst goes here
//var json = data;
var obj = jQuery.parseJSON(data);
$('#uptime_span').html(obj.average +" %");
$('#test').html(data);
chart_data = google.visualization.arrayToDataTable([
obj.data
]);
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(chart_data, {
colors : ['#00DB00'],
title : '',
isStacked: false,
width: 570,
height: 400,
'chartArea': {'width': '88%', 'height': '90%'},
hAxis: {minValue: 0,showTextEvery: 6, slantedText: false},
vAxis: {
viewWindowMode:'explicit',
viewWindow:{
max:100,
min:90.65
}
},
pointSize: 3,
legend: {position: 'none'}
});
}
});
});
});
eg. obj.average and obj.data gives me the two string. However this does not seem to work, i guess the data doesn't get passed along correctly.
I have tested the actual output data (eg obj.data) is formatted correct as I've tried inserting it statically.
So I'm obviously doing something wrong here, and I assume it's because I'm passing an string while google chart needs an array, tried to fix it in various ways but haven't found anything working yet.
Can anyone help me with this one?

Answer 1

The format of your JSON is valid, but probably not what you're wanting:
{"data":"['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00], ", "average":99.98}
That represents an object with a field named data whose value is a string (like you said). What you probably want to do is make it an array on the server side. Instead of double quotes, use square brackets. There is also a trailing comma which must be removed.
{"data":[['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00]], "average":99.98}