I am getting 'Table has no columns.'

fsalam

unread,

Jul 3, 2012, 9:14:04 AM7/3/12

to Google Visualization API

Hi,

I am using your sample code for php, except that my php is a remote
server and not local. Here is the html code

<html>
<head>

<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1/jquery.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: "http://192.168.10.51:82/gchartsapi/
getReportsData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
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>

<body>

<div id="chart_div"></div>
</body>
</html>

I am setting output as application/json in the php file.

When I invoke the php url directly, I am getting the following json
file.
{
"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}]}
]
}

However, when called from the above javascript, it comes with a 'Table
has no columns' message. I am new to json. Am I doing something wrong?
Why is the javascript not able to get the json data? Please help.

-fsalam

asgallant

unread,

Jul 3, 2012, 10:56:13 AM7/3/12

to google-visua...@googlegroups.com

Replace the drawChart function with this, and see what it does:

function drawChart() {
  $.ajax({
  url: "http://192.168.10.51:82/gchartsapi/getReportsData.php",
  dataType: "json",
  success: function (jsonData) {
  alert('success');
  if (!$.browser.msie) {
  console.log(jsonData);

}
  // Create our data table out of JSON data loaded from server.
  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 (jqXHR, textStatus, errorThrown) {
  alert(textStatus + '\n' + errorThrown);
  if (!$.browser.msie) {
  console.log(jqXHR);
  }
  }
  });
}

Run that in Chrome or Firefox and check the developers console (chrome: Ctrl+Shift+j, FF: Ctrl+Shift+k) to see what it outputs.

Fawzy Salam

unread,

Jul 4, 2012, 2:49:51 AM7/4/12

to google-visua...@googlegroups.com

@asgallant

Thanks for pointing me in the right direction. The issue was AJAX cross domain problem. Even jqXHR wasn't getting set

xhr.status: 0

xhr.statusText: error

xhr.readyState: 0

textStatus: error

errorThrown:

xhr.redirect: undefined

I just copied the html file to the same server and the issue was solved. I guess, a workable solution would be to use JSONP.

Regards

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/5B_WIiICt1gJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

Message has been deleted

APRIL LEE-NEWTON

unread,

Mar 6, 2020, 12:05:28 PM3/6/20

to Google Visualization API

I am also getting this error. My code is below.

// Load the Visualization API and the piechart package.

google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var jsonData =

$.ajax({

url: "../CAO/index.cfm?fuseaction=Dashboards.Data&returnformat=json",

dataType: "json",

async: false

}).responseText;

// Create our data table out of JSON data loaded from server.

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>

Data file looks like this:

{ "sEcho": 0, "iTotalRecords": 753, "iTotalDisplayRecords": 753, "iTotalRecords": 753, "aaData": [["0","1010360"],["0","2010523"],["0","2010894"],["0","2091560"]] }

Thank you!

Reply all

Reply to author

Forward