StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
12646539
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2012-09-28T19:55:12.180
FavoriteCount
0
LastActivityDate
2014-10-10T06:54:23.390
LastEditDate
2014-10-10T06:54:23.390
LastEditorUserId
3999697
OwnerUserId
942698
ParentId
12229375
PostTypeId
2
Score
6
ViewCount
0
LastEditorDisplayName
text
Body
<p>Is this what you are looking for?</p> <p>I've commented the script, kept it close to the original from the link you provided.</p> <p><a href="http://jsfiddle.net/mori57/FhSrn/5/" rel="nofollow">JsFiddle</a></p> <p>(Decided to add the script here, for archival purposes and b/c Stack Overflow has been encouraging the inclusion of pertinent source.)</p> <p>HTML Source used:</p> <pre><code><div id="diagram"></div> <div class="get"> <div class="skill"> <span class="text">jQuery</span> <input type="hidden" class="percent" value="95" /> <input type="hidden" class="color" value="#97BE0D" /> </div> <div class="skill"> <span class="text">CSS3</span> <input type="hidden" class="percent" value="90" /> <input type="hidden" class="color" value="#D84F5F" /> </div> <div class="skill"> <span class="text">HTML5</span> <input type="hidden" class="percent" value="80" /> <input type="hidden" class="color" value="#88B8E6" /> </div> <div class="skill"> <span class="text">PHP</span> <input type="hidden" class="percent" value="53" /> <input type="hidden" class="color" value="#BEDBE9" /> </div> <div class="skill"> <span class="text">MySQL</span> <input type="hidden" class="percent" value="45" /> <input type="hidden" class="color" value="#EDEBEE" /> </div> </div> </code></pre> <p>Javascript:</p> <pre><code>var o = { init: function(){ this.diagram(); }, random: function(l, u){ return Math.floor((Math.random()*(u-l+1))+l); }, diagram: function(){ var originX = 10; var originY = 50; var barHeight = 30; var barMargin = 10; var r = Raphael('diagram', 600, 600); // We don't need the customAttributes, so we drop that, // and replace with a simple call to rect() r.rect(10,10,300,barHeight,6).attr({ stroke: 'none', fill: '#193340' }); // Similarly, we reposition the title to center // it with our new rectangle. var title = r.text(160, 25, 'Skills').attr({ font: '20px Arial', fill: '#fff' }).toFront(); $('.get').find('.skill').each(function(i){ // I've added in a width field, and calculate // it based on turning its value to a percentage // of the width of the Raphael element. var t = $(this), color = t.find('.color').val(), value = t.find('.percent').val(), width = r.width * (t.find('.percent').val() *.01), text = t.find('.text').text(); // create a new rectangle, providing X, Y, width, // and height. Base the fill and stroke on the color var z = r.rect(originX, originY, width, barHeight).attr({ 'fill': color, 'stroke': color, 'stroke-width':0 }); // update our originY to accomodate shifting the next // bar down by the barHeight + barMargin originY = originY + barHeight + barMargin; z.mouseover(function(){ // I added X in to animation, so that it would // appear to expand from the left, and the // expansion would not bleed off-canvas this.animate({ 'x': 10, 'stroke-width': 20, opacity: .75 }, 1000, 'elastic'); if(Raphael.type != 'VML') //solves IE problem this.toFront(); title.animate({ opacity: 0 }, 500, '>', function(){ this.attr({ text: text + ': ' + value + '%' }).animate({ opacity: 1 }, 500, '<'); }); }).mouseout(function(){ // and here I revert back to the originX after the // mouse has moved on... this.animate({ x: originX, 'stroke-width': 0, opacity: 1 }, 1000, 'elastic'); }); }); } } $(function(){ o.init(); }); </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PORaphael.js bar chart with tutorial
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USJason M. Batchelor
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. PORaphael.js bar chart with tutorial
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTAcceptedByOriginator
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COYou're quite welcome, it was a fun exercise. Tosh is not completely incorrect, however, in that you could simulate, on modern browsers, several of the same effects without having to resort to Raphael or SVG or Canvas. It wouldn't be a bad idea to look at some CSS-related solutions as well, so you can choose based on the relative merits of all available options. In the meantime, glad this helped!
  singulars
  PostPostId
  PO
  UserUserId
  USJason M. Batchelor

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.