Databases
StackOverflow2013
Postsdbo
POHow to make a dynamic json and get the json response in a jsp in data driven documents
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a dynamic json and get the json response in a jsp in data driven documents
    primarykey
    data
    text
    <p>I am new to D3 api.I have to make a tree like structure which have a json file where the values are hardcoded,and I have a servlet where I am getting some values from database and there I have to make the json dynamically in the servlet and have to set the response back to the D3.This is my html where I have written the d3..I am able to create json using java class but can not call this from the D3.js,This is my java file and the created json and also my html file..... </p> <pre><code>public class Test { public static void main(String[] args) { // hierarchical data in a flattened list String[][] data = { {"Toyota", "Gas", "Compact", "Corolla"}, {"Toyota", "Gas", "Compact", "Camry"}, {"Toyota", "Hybrid", "Compact", "Prius"}, {"Honda", "Gas", "Compact", "Civic"} }; TreeManager treeManager = new TreeManager(); for(String[] row : data) { // build the path to our items in the tree List&lt;String&gt; path = new ArrayList&lt;String&gt;(); for(String item : row) { // add this item to our path path.add(item); // will add it unless an Item with this name already exists at this path treeManager.addData(treeManager, path); } } treeManager.getData(data[0]).putValue("MPG", 38); treeManager.getData(data[1]).putValue("MPG", 28); Gson gson = new Gson(); System.out.println(gson.toJson(treeManager)); } /** * This base class provides the hierarchical property of * an object that contains a Map of child objects of the same type. * It also has a field - Name * */ public static abstract class TreeItem implements Iterable&lt;TreeItem&gt;{ private Map&lt;String, TreeItem&gt; children; private String name; public TreeItem() { children = new HashMap&lt;String, TreeItem&gt;(); } public String getName() { return name; } public void setName(String name) { this.name = name; } public void addChild(String key, TreeItem data) { children.put(key, data); } public TreeItem getChild(String key) { return children.get(key); } public boolean hasChild(String key) { return children.containsKey(key); } @Override public Iterator&lt;TreeItem&gt; iterator() { return children.values().iterator(); } } /** * This is our special case, root node. It is a TreeItem in itself * but contains methods for building and retrieving items from our tree * */ public static class TreeManager extends TreeItem { /** * Will add an Item to the tree at the specified path with the value * equal to the last item in the path, unless that Item already exists */ public void addData(List&lt;String&gt; path) { addData(this, path); } private void addData(TreeItem parent, List&lt;String&gt; path) { // if we're at the end of the path - create a node String data = path.get(0); if(path.size() == 1) { // unless there is already a node with this name if(!parent.hasChild(data)) { Group group = new Group(); group.setName(data); parent.addChild(data, group); } } else { // pass the tail of this path down to the next level in the hierarchy addData(parent.getChild(data), path.subList(1, path.size())); } } public Group getData(String[] path) { return (Group) getData(this, Arrays.asList(path)); } public Group getData(List&lt;String&gt; path) { return (Group) getData(this, path); } private TreeItem getData(TreeItem parent, List&lt;String&gt; path) { if(parent == null || path.size() == 0) { throw new IllegalArgumentException("Invalid path specified in getData, remainder: " + Arrays.toString(path.toArray())); } String data = path.get(0); if(path.size() == 1) { return parent.getChild(data); } else { // pass the tail of this path down to the next level in the hierarchy return getData(parent.getChild(data), path.subList(1, path.size())); } } } public static class Group extends TreeItem { private Map&lt;String, Object&gt; properties; public Object getValue(Object key) { return properties.get(key); } public Object putValue(String key, Object value) { return properties.put(key, value); } public Group () { super(); properties = new HashMap&lt;String, Object&gt;(); } } } </code></pre> <p>and this is our json</p> <pre><code> { "children": { "Toyota": { "properties": {}, "children": { "Hybrid": { "properties": {}, "children": { "Compact": { "properties": {}, "children": { "Prius": { "properties": {}, "children": {}, "name": "Prius" } }, "name": "Compact" } }, "name": "Hybrid" }, "Gas": { "properties": {}, "children": { "Compact": { "properties": {}, "children": { "Corolla": { "properties": { "MPG": 38 }, "children": {}, "name": "Corolla" }, "Camry": { "properties": { "MPG": 28 }, "children": {}, "name": "Camry" } }, "name": "Compact" } }, "name": "Gas" } }, "name": "Toyota" }, "Honda": { "properties": {}, "children": { "Gas": { "properties": {}, "children": { "Compact": { "properties": {}, "children": { "Civic": { "properties": {}, "children": {}, "name": "Civic" } }, "name": "Compact" } }, "name": "Gas" } }, "name": "Honda" } } } </code></pre> <p>This is my html file ...</p> <pre><code>&lt;meta charset="utf-8"&gt; </code></pre> <p></p> <pre><code>.node circle { cursor: pointer; stroke: #3182bd; stroke-width: 1.5px; } .node text { font: 10px sans-serif; pointer-events: none; text-anchor: middle; } line.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; } </code></pre> <p> </p> <pre><code>&lt;script type="text/javascript" src="d3/d3.v3.min.js"&gt;&lt;/script&gt; &lt;script&gt; var width = 960, height = 500, root; var force = d3.layout.force() .linkDistance(80) .charge(-120) .gravity(.04) .size([width, height]) .on("tick", tick); //adding as svg element var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var link = svg.selectAll(".link"), node = svg.selectAll(".node"); d3.json("graph.json", function(error, json) { root = json; update(); //responsible for creating the layout }); function update() { var nodes = flatten(root), /* *d3.layout.tree() is the starting point *for tree layouts in D3. *The call to this function returns an object * that contains a bunch of methods to configure * the layout and also provides methods to * compute the layout **/ links = d3.layout.tree().links(nodes);//attach the nodes // Restart the force layout. force .nodes(nodes) .links(links) .start(); // Update links. link = link.data(links, function(d) { return d.target.id; }); link.exit().remove(); link.enter().insert("line", ".node") .attr("class", "link"); // Update nodes. node = node.data(nodes, function(d) { return d.id; }); node.exit().remove(); var nodeEnter = node.enter().append("g") .attr("class", "node") .on("click", click) .call(force.drag); nodeEnter.append("circle") .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; }); nodeEnter.append("text") .attr("dy", ".35em") .text(function(d) { return d.name; }); node.select("circle") .style("fill", color); } /*Giving elements on click*/ function tick() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } /*Adjusting the color of each node*/ function color(d) { return d._children ? "#3182bd" // collapsed package : d.children ? "#c6dbef" // expanded package : "#fd8d3c"; // leaf node } // Toggle children on click. function click(d) { if (d3.event.defaultPrevented) return; // ignore drag if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(); } // Returns a list of all nodes under the root. function flatten(root) { var nodes = [], i = 0; function recurse(node) { if (node.children) node.children.forEach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(root); return nodes; } &lt;/script&gt; </code></pre> <p>this is the json and the html file, now I have to make the json dynamically and set the response back to the D3 api.Anyone please help...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USlucifer
    1. USlucifer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COi have to call this from my D3.js someone plesae help
      singulars
      1. POHow to make a dynamic json and get the json response in a jsp in data driven documents
      1. USlucifer
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload