Populating Data Using Server-Side Code

270 views
Skip to first unread message

David Harden

unread,
Apr 10, 2012, 4:49:30 AM4/10/12
to google-visua...@googlegroups.com
Hello,

I have copied the three files from google's example "Populating Data Using Server-Side Code" under "Connecting Your DataBase" (i.e., exampleUsingPHP.html, getData.php and sampleData.json) to my server but I'm having trouble getting the chart to display.

It displays OK if I run getData.php from my browser's address bar (Firefox 11.0 and MacBook) and then copy and paste the json it echos from the screen directly into exampleUsingPHP.html as shown below:

var jsonData = { "cols": [ {"id":"","label":"Topping","pattern":"","type":"string"}, {"id":"","label":"Slices","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]}, {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}, {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}, {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]} ] };

BTW, Google DO NOT show a semi colon after the last curly bracket in their json example file (sampleData.json) and the chart won't display without it.

So, I think my problem lies with the following ajax function:

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

I have read through the JQUERY documentation for jQuery.ajax() but can't find anything wrong. Also, I thought maybe ajax didn't like spaces in its json but manually deleting them from sampleData.json didn't help.

Now, I have run out of ideas and would greatly appreciate any help.

David Harden

asgallant

unread,
Apr 10, 2012, 10:06:43 AM4/10/12
to google-visua...@googlegroups.com
Try this:

jsonData = eval('(' + jsonData + ')');

Tudor

unread,
Apr 26, 2012, 9:39:56 PM4/26/12
to Google Visualization API
I have the same issue. After I made the 3 files the chart doesn't
show. I've tried asgallant's method but no luck.

asgallant

unread,
Apr 27, 2012, 12:10:23 PM4/27/12
to google-visua...@googlegroups.com
Post your code and a sample of the JSON your data source generates and I'll take a look.

Tudor

unread,
Apr 29, 2012, 5:51:07 AM4/29/12
to google-visua...@googlegroups.com
Hello, thanks for replying.

I'm trying to learn how to make a page where through a form with a name field people can populate the chart. So i thought of php.

I made 3 files as I was following the instructions found here https://google-developers.appspot.com/chart/interactive/docs/php_example 
And there is no result, not that I can see.

thank you again.

asgallant

unread,
Apr 30, 2012, 12:26:57 PM4/30/12
to google-visua...@googlegroups.com
I need to see your javascript and the JSON output by your PHP script in order to help.

asgallant

unread,
Jun 25, 2012, 5:25:18 PM6/25/12
to google-visua...@googlegroups.com
The alert never fires?  That's odd...I would guess that there is either a syntax error somewhere or there is an error fetching the data from the server.  Try replacing the drawChart function with this:

function drawChart () {

    $.ajax({
        url: 'getData.php',
        dataType: 'json',
        success: function (jsonData) {
            var data = new google.visualization.DataTable(jsonData);
    
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, {
                width: 400,
                height: 240
            });
        },
        error: function (e) {
            alert(e.responseText);
        }
    });
} 

Also, look in the developer's console in FF or Chrome for any error messages.

On Monday, June 25, 2012 4:08:34 PM UTC-4, pj wrote:
I am using the 3 files from  https://google-developers.appspot.com/chart/interactive/docs/php_example.  No chart is displayed.
I have tried with and without  
jsonData = eval('(' + jsonData + ')'); 
I do not get an alert.

Here are the programs:
examplesUsingPHP.html
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.

      alert(jsonData);
      jsonData = eval('(' + jsonData + ')'); 
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

------------------
getData.php
<?php 

// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.

$string = file_get_contents("sampleData.json");
echo $string;

// Instead you can query your database and parse into JSON etc etc

?>
----------------------
sampleData.json

{

pj

unread,
Jun 25, 2012, 8:46:30 PM6/25/12
to google-visua...@googlegroups.com
my bad.  I did not have the jquery.js in the directory.  I changed to: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> and it works.



On Monday, June 25, 2012 4:08:34 PM UTC-4, pj wrote:
I am using the 3 files from  https://google-developers.appspot.com/chart/interactive/docs/php_example.  No chart is displayed.
I have tried with and without  
jsonData = eval('(' + jsonData + ')'); 
I do not get an alert.

Here are the programs:
examplesUsingPHP.html
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.

      alert(jsonData);
      jsonData = eval('(' + jsonData + ')'); 
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

------------------
getData.php
<?php 

// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.

$string = file_get_contents("sampleData.json");
echo $string;

// Instead you can query your database and parse into JSON etc etc

?>
----------------------
sampleData.json

{
Reply all
Reply to author
Forward
0 new messages