StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
15184310
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-03-03T09:30:22.727
FavoriteCount
0
LastActivityDate
2013-03-03T17:51:26.953
LastEditDate
2013-03-03T17:51:26.953
LastEditorUserId
1943583
OwnerUserId
1943583
ParentId
15061047
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>OK, what I have done is gone back to the original example file that is included in the nvd3 downloaded zip file. Starting with the <code>multiBarHorizontalChart.html</code> file that is the examples folder. I was able to edit that file so that it looked like this;</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> <style> body { overflow-y:scroll; } text { font: 12px sans-serif; } #chart1 { margin: 10px; min-width: 100px; min-height: 100px; } #chart1 svg { height: 500px; } </style> <body> <div id="chart1"> <svg></svg> </div> <script src="../lib/d3.v2.js"></script> <script src="../nv.d3.js"></script> <script src="../src/utils.js"></script> <script src="../src/tooltip.js"></script> <script src="../src/models/legend.js"></script> <script src="../src/models/axis.js"></script> <script src="../src/models/multiBarHorizontal.js"></script> <script src="../src/models/multiBarHorizontalChart.js"></script> <script src="stream_layers.js"></script> <script> d3.json('data.json', function(data) { var chart; nv.addGraph(function() { chart = nv.models.multiBarHorizontalChart() .x(function(d) { return d.label }) .y(function(d) { return d.value }) .margin({top: 30, right: 20, bottom: 50, left: 175}) .showValues(true) .tooltips(false) .barColor(d3.scale.category20().range()) .showControls(true); chart.yAxis .tickFormat(d3.format(',.2f')); d3.select('#chart1 svg') .datum(data) .transition().duration(500) .call(chart); nv.utils.windowResize(chart.update); return chart; }); }); </script> </code></pre> <p>You should be able to note the <code>d3.json('data.json', function(data) {</code> line in there which will load your JSON file which is called data.json.</p> <pre><code>[ {"values": [ {"label":"Alaska","value":3}, {"label":"Alabama","value":4}, {"label":"Arkansas","value":5}, {"label":"Arizona","value":7}, {"label":"California","value":8}, {"label":"Colorado","value":9}, {"label":"Missouri","value":31} ] } ] </code></pre> <p>It is possible that this is where you were striking problems as you will see that there is an extra set of square brackets <code>[]</code> outside the data. If you have a look at the sample data that was included with the example, they are in there too (otherwise I wouldn't have known either).</p> <p><img src="https://i.stack.imgur.com/waCcG.png" alt="enter image description here"></p> <p>Hopefully that set's you a little further along.</p> <p>You will want to now check out how to use a php script to query your database, return the data in correctly formatted JSON and then call that script from the point where you initially called the data.json file.</p> <p>Good luck.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to Use sql queries to draw dynamic chart in NV D3?
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USd3noob
UserOwnerUserId
1. USd3noob
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POHow to Use sql queries to draw dynamic chart in NV D3?
  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
CommentsPostId
1. COThank you d3noob :) Good job :)
  singulars
  PostPostId
  PO
  UserUserId
  USPurushoth
2. COCheers! I learned something too!
  singulars
  PostPostId
  PO
  UserUserId
  USd3noob

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.