First, here is an example of how to create a data table from a static
content -
http://code.google.com/apis/ajax/playground/?type=visualization#json_data_table
Second, you are doing too many things in your code.
You can either create the dataTable on the client or get it using a Query
object. For the first case you can write something like
<script type="text/javascript">
google.load("visualization", "1", {packages:["Table", "MotionChart"]});
google.setOnLoadCallback(initialize);
var dataTableObj =
{cols:[{id:'Col1',label:'',type:'number'},
{id:'Col2',label:'',type:'number'},
{id:'Col3',label:'',type:'number'}],
rows:[{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]},
{c:[{v:2.0,f:'2'},{v:3.0,f:'3'},{v:4.0,f:'4'}]},
{c:[{v:3.0,f:'3'},{v:4.0,f:'4'},{v:5.0,f:'5'}]},
{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]}]};
function initialize() {
var data = new google.visualization.DataTable(dataTableObj);
var table = new google.visualization.Table(document.getElementById
('chart_div'));
table.draw(data, {showRowNumber: true});
}
</script>
and for the second
<script type="text/javascript">
google.load("visualization", "1", {packages:["Table", "MotionChart"]});
google.setOnLoadCallback(sendAndDraw);
function sendAndDraw() {
var query = new google.visualization.Query(__URL__);
query.send(handleResponse)
}
function handleResponse(response) {
if (response.isError()) {
alert(response.getMessage() + ' ' + response.getDetailedMessage())
return;
}
var data = response.getDataTable();
var table = new google.visualization.Table(document.getElementById
('chart_div'));
table.draw(data, {showRowNumber: true});
}
</script>
On Mon, Jun 29, 2009 at 10:14 AM, drk2cmp <[email protected]> wrote:
>
> I'm having a bit of a problem. I want to create a visualization, but
> load the data from an external file using the JSON format.
>
> Every example I can find is using static JSON within the visualization
> script, without calling if from an external file.
>
> For testing my source file is:
>
> {version:'0.6',reqId:'0',status:'ok',sig:'5982206968295329967',table:
> {cols:[{id:'Col1',label:'',type:'number'},
>
> {id:'Col2',label:'',type:'number'},
> {id:'Col3',label:'',type:'number'}],rows:[{c:[{v:1.0,f:'1'},{v:
> 2.0,f:'2'},
>
> {v:3.0,f:'3'}]},{c:[{v:2.0,f:'2'},{v:3.0,f:'3'},{v:4.0,f:'4'}]},{c:[{v:
> 3.0,f:'3'},{v:4.0,f:'4'},{v:5.0,f:'5'}]},{c:
>
> [{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]}]}}
>
> My visualization script is as follows:
>
> <script type="text/javascript" src="http://www.google.com/jsapi";></
> script>
> <script type="text/javascript">
>
> google.load("visualization", "1", {packages:["Table",
> "MotionChart"]});
> google.setOnLoadCallback(initialize);
>
> function initialize() {
> var opts = {sendMethod: 'xhr'};
> var query = new google.visualization.Query('
> http://localhost/
> analytics/source.csv?tqx=reqId:0;<http://localhost/%0Aanalytics/source.csv?tqx=reqId:0;>
> ',opts);
>
> response = query.send();
>
> data = google.visualization.Query.setResponse(response)
>
> data = google.visualization.Query.getDataTable(query);
>
> var table = new
> google.visualization.Table(document.getElementById
> ('chart_div'));
> table.draw(data, {showRowNumber: true});
>
> }
> </script>
>
> I get no error messages, the JSON file is loaded according to Firebug,
> but the screen is blank. What am I doing wrong? Any help would be
> appreciated!! Thanks.
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization 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-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
