Loading External JSON file into Visualization

[drk2cmp]

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;',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.

[ChartMan]

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>

[drk2cmp]

Thanks for the help. Works swimmingly. :-)

On Jun 29, 1:06 am, ChartMan <chart...@google.com> wrote:
> 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_...

> > analytics/source.csv?tqx=reqId:0;<http://localhost/%0Aanalytics/source.csv?tqx=reqId:0;>

[xspotlivin]

drk2cmp,

I'm trying to accomplish the same thing as you. I've looked at the
code submitted above, but my code is still not working. Here's what I
have:

<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">

google.load('visualization', '1', {packages: ['motionchart']});


function sendAndDraw() {
var query = new google.visualization.Query('http://web.mit.edu/
dmbrown/www/example2.json');

query.send(handleResponse)
}
function handleResponse(response) {
if (response.isError()) {
alert(response.getMessage() + ' ' + response.getDetailedMessage
())
return;
}
var data = response.getDataTable();

var motionchart = new google.visualization.MotionChart
(document.getElementById
('visualization'));
motionchart.draw(data, {'width': 800, 'height': 400});

}
google.setOnLoadCallback(sendAndDraw);

</script>


Do you see what's wrong with this? Thanks for your help.

[ChartMan]

your server is returning a data table json. If you are using the google.visualization.Query the json response has some more info on top of the data table json.
See http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html#jsondatatable
Note that the response 'table' property is a json in the format you are using at the moment.

[Tangred]

Hi,

I have similar problem, and i can't what i should do. I don't know which data i should include "on top of the data table". I'm using that :https://developers.google.com/chart/interactive/docs/php_example

Regards

[asgallant]

If you are using PHP and you want a Query-compatible data source, then you should look at this library, which will help you implement a compatible data source.  If you just want to use an AJAX call to fetch data from your server, then you don't have to worry about all that extra stuff.

[Tangred]

Le mardi 19 février 2013 02:44:05 UTC+1, asgallant a écrit :

If you are using PHP and you want a Query-compatible data source, then you should look at this library, which will help you implement a compatible data source.  If you just want to use an AJAX call to fetch data from your server, then you don't have to worry about all that extra stuff.

thanks