I can't figure out how to load a datable using ajax/json. Here is my
json code in a remote file (pie.json)
{
cols: [{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'}],
rows: [{c:[{v: 'Work'}, {v: 11}]},
{c:[{v: 'Eat'}, {v: 2}]},
{c:[{v: 'Commute'}, {v: 2}]},
{c:[{v: 'Watch TV'}, {v:2}]},
{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]
}
This is what I have tried so far but it doesn't work.
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
function ajaxjson()
{
jsonreq=GetXmlHttpObject();
jsonreq.open("GET", "pie.json", true);
jsonreq.onreadystatechange = jsonHandler;
jsonreq.send(null);
}
function jsonHandler()
{
if (jsonreq.readyState == 4)
{
var res = jsonreq.responseText;
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(res, 0.6)
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true});
} // end drawChart
} // end if
} // end jsonHandler
function GetXmlHttpObject()
{
var xmlHttp=null;
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
</script>
The following code works perfectly (taken directly fromm google) when
it is standalone. I tried putting this inside the jsonHandler
function directy and still fails so assume that adjacent code is
busting things. Also not sure if the json is actually getting to the
datatable as I have it (new to JSON)..
<script type = "text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable( {
cols: [{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'}],
rows: [{c:[{v: 'Work'}, {v: 11}]},
{c:[{v: 'Eat'}, {v: 2}]},
{c:[{v: 'Commute'}, {v: 2}]},
{c:[{v: 'Watch TV'}, {v:2}]},
{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]
}
, 0.6)
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true});
</script>
Any help would be greatly appreciated.
Thanks
--
You received this message because you are subscribed to the Google Groups
"Google Chart API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-chart-api?hl=en.
