Re: Get JSON Data with AJAX

729 views
Skip to first unread message

asgallant

unread,
Aug 16, 2012, 11:09:10 PM8/16/12
to google-visua...@googlegroups.com
You might want to consider building a PHP script that will query your database for you and output the data in the DataTable JSON format (or you could try out the 3rd-party PHP library that implements the Google Query interface).

If you don't want to do either of those, you could make a quick-fix change to the PHP file to make it accept a parameter via the url and select the JSON file based on that:

<?php
// get the index of the file to output
$index = $_GET['index'];

// select the file based on $index
switch ($index) {
    case 0:
        echo file('/path/to/file_0.json');
        break;
    case 1:
        echo file('/path/to/file_1.json');
        break;
    case 2:
        echo file('/path/to/file_2.json');
        break;
    case 3:
        echo file('/path/to/file_3.json');
        break;
    .
    .
    .
    case n:
        echo file('/path/to/file_n.json');
        break;
}
?>

You then choose the file to grab like this:

var jsonData = $.ajax({
    url: "getData.php?index=3",
    dataType: "json",
    async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData); 


The selector doesn't have to be "index" and it doesn't have to be numeric - as long as you can map the request from the js end of things to a file on your server, it will work.

On Thursday, August 16, 2012 6:46:21 PM UTC-4, Chriggi wrote:
Hello,

I have a lot of json-files with different data from my database and want to populate my datatables with them. Currently I'm using the method described here: https://developers.google.com/chart/interactive/docs/php_example

Basically I do this:

var jsonData = $.ajax({
   url: "getData.php",
   dataType:"json",
   async: false
    }).responseText;
var data = new google.visualization.DataTable(jsonData);

In getData.php there are just these 2 lines:
$string = file_get_contents("results.json");
echo $string;

The problem here is, with one .php-file I can only get one JSON. So if i have for example 10 different charts with 10 different datatables created from different JSONS I need 10 .php-files. Isn't there a better solution for this?

Chriggi

unread,
Aug 17, 2012, 7:29:32 AM8/17/12
to google-visua...@googlegroups.com
Thanks for your solution with the cases, it worked very well.

Actually I already have a PHP script which creates the JSON file. On the website I can select which columns I want to have and the script creates the JSON file based on the created query.

At the end of the script I do this:
    $fp = fopen('resultsOwnTable.json', 'w');
    fwrite($fp, json_encode($responseTable));

So basically I could just save do this?
      $table = json_encode($responseTable)
And use this to populate my DataTable in Javascript?

asgallant

unread,
Aug 17, 2012, 11:24:11 AM8/17/12
to google-visua...@googlegroups.com
In that PHP script, instead of putting the json in a file, why not return the json in response to client request?  There's no need to clutter your server with json files.

Chriggi

unread,
Aug 17, 2012, 1:57:12 PM8/17/12
to google-visua...@googlegroups.com
I know what you mean, but I'm not sure how to do this. So I just save this in a variable json_encode($responseTable)and in Javascript I use .responseText() on this variable and use it as a DataTable?

asgallant

unread,
Aug 17, 2012, 2:27:03 PM8/17/12
to google-visua...@googlegroups.com
Your javascript would look like this:

var jsonData = $.ajax({
    url: "getData.php",
    data: $('#myForm').serialize(),
    dataType: "json",
    async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData); 

where "myForm" is the form you use to select which columns you want and getData.php is the script that queries the database and builds the JSON.  Then, in the PHP script, instead of writing the data to a .json file, echo the json string.
Reply all
Reply to author
Forward
0 new messages