How to create TableQueryWrapper table with Server side populated Json Data

Ram

unread,

Apr 12, 2012, 2:30:43 AM4/12/12

to google-visua...@googlegroups.com

I want to create a Table like "Table Query Wrapper Example" (like https://developers.google.com/chart/interactive/docs/examples#tablequerywrapper ). I have noticed that this Table has referred data from a Spread sheet. But Now I have populated data as Json on server side php for my Visualization Table. Is it possible to use my php url(which returns JSON data for Table) for creating like TableQueryWrapper suppoted Table.

Also i have read I need a Google Account with already created Spread sheet for getting spread sheet URL.So How to create a Spreadsheet dynamically from a PHP.

asgallant

unread,

Apr 12, 2012, 9:57:01 AM4/12/12

to google-visua...@googlegroups.com

Assuming that your JSON is properly formatted in the way that the Visualization API expects it to be, then you can just use the url to your data source in place of the url to the Google spreadsheet and it should work fine.

ram prasad

unread,

Apr 13, 2012, 12:40:23 AM4/13/12

to google-visua...@googlegroups.com

1) I have tried to use DataSource URL as my PHP URL. But i got errror as " Uncaught Error: Missing query for request id: undefined ". shall i want to pass any parameter to query static json data from my PHP?

2) Also i try a simple table like below,

index.html:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="tablequerywrapper.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages' : ['table']});
google.setOnLoadCallback(init);
var dataSourceUrl = 'getData.php';
var query, options, container;
function init() {
query = new google.visualization.Query(dataSourceUrl);
container = document.getElementById("table");
options = {'pageSize': 2};
sendAndDraw();
}
function sendAndDraw() {
query.abort();
var tableQueryWrapper = new TableQueryWrapper(query, container, options);
tableQueryWrapper.sendAndDraw();
}

function setOption(prop, value) {
options[prop] = value;
sendAndDraw();
}
</script>
</head>
<body>
<form action="">
Number of rows to show:
<select onChange="setOption('pageSize', parseInt(this.value, 10))">
<option value="0">0</option>
<option value="3">3</option>
<option selected=selected value="5">5</option>
<option value="8">8</option>
<option value="-1">-1</option>
</select>
</form>
<br />
<div id="table"></div>
</body>

getData.php:

<?php
$string = file_get_contents("sampleData.json");
echo $string;
?>

sampleData.json:

{
"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}]}
]
}

This is also not working?

--
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/-/N7Zfni2nhXkJ.

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.

--
BY

R.RAMPRASAD

asgallant

unread,

Apr 13, 2012, 9:43:40 AM4/13/12

to google-visua...@googlegroups.com

Right, I remember this thing now. I've seen other people trying to use this and it never seems to work. There is a much simpler method, using ChartWrappers:

google.load('visualization', '1');
google.setOnLoadCallback(drawChart);

function drawChart() {
  var wrapper = new google.visualization.ChartWrapper({
  chartType: 'Table',
  dataSourceUrl: 'getData.php',
  containerId: 'table',
  options: {
  pageSize: 2,
  // if you set pageSize, you need to set page to 'enable' to make paging work
  page: 'enable'
  }
  });
  wrapper.draw();

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
BY

R.RAMPRASAD

Sayyed Moij Abdul Majeed

unread,

Feb 28, 2017, 1:00:30 AM2/28/17

to Google Visualization API

Thank you very much , i am also getting same problem for paging in table view.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
BY

R.RAMPRASAD

Reply all

Reply to author

Forward