StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
10865668
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2012-06-02T20:22:09.793
FavoriteCount
0
LastActivityDate
2012-06-02T20:22:09.793
LastEditDate
LastEditorUserId
0
OwnerUserId
1349117
ParentId
10859323
PostTypeId
2
Score
3
ViewCount
0
LastEditorDisplayName
text
Body
<p>I solved the problem by using the json call method. Code below.</p> <pre><code> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>David's Build Up</title> <link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="/images/favicon.ico" /> <noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script>  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="./js/label.js"></script>  <script type="text/javascript" src="http://www.google.com/jsapi"></script>  <script type="text/javascript"> google.load('visualization', '1', {}); </script> <script type="text/javascript"> function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) { var bounds = new google.maps.LatLngBounds( new google.maps.LatLng( topleftx, toplefty ), new google.maps.LatLng( bottomrightx, bottomrighty ) ); var overlay = new google.maps.Rectangle({ map: carto_map, bounds: bounds, strokeColor: "#0000ff", strokeOpacity: 0.20, strokeWeight: 2, fillColor: "#0000ff", fillOpacity: 0.050, }); } function initialize() { // Set the map parameters var cartodbMapOptions = { zoom: 5 , center: new google.maps.LatLng( 40.313043, -97.822266 ), mapTypeId: google.maps.MapTypeId.ROADMAP } // Initialize the map carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions); // Query to grab the data var query = "SELECT Latitude, Longitude, Impressions FROM " + '[encrypted table ID here]'; var encodedQuery = encodeURIComponent(query); // Construct the URL to grab the data var url = ['https://www.googleapis.com/fusiontables/v1/query']; url.push('?sql=' + encodedQuery); url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); url.push('&callback=?'); // Set the number of rows var numRows = 3500; // Get the variables from the table, in a loop $.ajax({ url: url.join(''), dataType: 'jsonp', success: function (data) { var rows = data['rows']; var ftData = document.getElementById('ft-data'); for (var i in rows) { var centerX = rows[i][0]; var centerY = rows[i][1]; var imps = rows[i][2]; // Set the center points var centerPoint = new LatLon(centerX,centerY); var latLng = new google.maps.LatLng(centerX,centerY); // Set top left points var toplefty = centerPoint.destinationPoint(-45, 6)._lon; var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat; // Set bottom right points var bottomrighty = centerPoint.destinationPoint(135, 6)._lon; var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat; // Draw the box drawBox(topleftx, toplefty, bottomrightx, bottomrighty); // Drop markers var marker = new google.maps.Marker({ position: latLng, draggable: false, markertext: imps, flat: true, map: carto_map }); var label = new Label({ map: carto_map, position: latLng, draggable: true }); label.bindTo('text', marker, 'markertext'); marker.setMap(null); }; } }); } </script> </head> <body onload="initialize()"> <div id="map"></div> <div id="ft-data"></div> </body> </html> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POGetting around the 500 row limit
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USdavidtspf
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COBrilliant. Just the clue I was hoping for. Was able to make this work for my test case. The ChartTools API handles a lot of convenience translating FT response object to a DataTable, but applies a 500 row limit. Using Ajax directly allows one to get around that limit, but also the burden/benefit of working directly with the lower-level data structure it returns.
  singulars
  PostPostId
  PO
  UserUserId
  USprototype

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.