score:4
Accepted answer
Finally I created Grouped Bar Chart using JSON data. I have written web services which will send JSON data to D3.
My JSON is same as above I posted in Question
Only the change I have done in D3 is ..
d3.json("rooturi/rest/ordernumbertracks", function(error, data) {
var ageNames = d3.keys(data.ordernumbertrack[0]).filter(function(key) { return key !== "state";
});
data.ordernumbertrack.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.ordernumbertrack.map(function(d) { return d.state; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data.ordernumbertrack, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("");
var state = svg.selectAll(".state")
.data(data.ordernumbertrack)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.state) + ",0)"; });
I can't expect It is as simple as that :)
Source: stackoverflow.com
Related Query
- D3.js : How to read data from JSON in Grouped Bar Chart
- grouped bar chart from JSON data instead of CSV
- D3: Create a grouped bar chart from json objects
- How to create vertically grouped bar chart in d3.js using json data?
- D3 Grouped Bar Chart with JSON nested data
- How to read JSON data from same json for tree layout insteadof reading from other .JSON file?
- How to display second y-axis to right of grouped bar chart data in d3
- How to load data to D3 chart from JSON when there are only tuples
- d3.js: how to use data from the parent node? (to show the grouped bar name at the individual bar tooltip)
- Grouped Bar Chart From JSON D3.JS
- d3 json nest data mapping, grouped bar chart
- How to insert new data into a bar chart from input text field?
- D3.js Grouped bar chart with JSON data
- Unable to create a bar chart from json data using d3.js
- D3.js horizontal bar chart and data from json file
- how to make real time multi line chart using d3 where data is from api in json format
- Display Bar Chart for Last week, Last Month, and Last Year Data from JSON using D3.js
- Grouping json data to create grouped bar chart
- How to update d3.js bar chart with new data
- d3 accessing nested data in grouped bar chart
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- How to animate a d3 js v4 bar chart from bottom(x axis) to up?
- Convert a d3 chart to load data from json inside a variable
- D3 Library — How To Access Data from JSON in this example
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- D3: How can I change data in an existing bar chart
- D3.js update bar chart from json
- How to update data in stack bar chart in D3
- Grouped bar chart with zoom and updateable data error
- How to make grouped stacked bar chart in d3js?
More Query from same tag
- Creating a swim lane chart using d3
- How to loop through JSON file using jQuery
- How do i change the styling of a nodes CSS through javascript(d3)
- Detect Graph Edges Overlapping
- DC.js bar chart x-axis labels not aligned with bars
- move a slice of the pie chart using d3.js
- Running D3.js examples
- D3.js column chart inversing when adding text
- How to get boundary of zoomed & paned svg in d3
- Multiple kernel density estimations in one d3.js chart
- d3.js Tree - Assign unique color to parents and their children
- d3.js - extent width not match axis line with svg defs
- draw a donut in d3js from json data
- Is it possible for a ElasticY left axis and a defined rightYaxis domain?
- scipy dendrogram to json for d3.js tree visualisation
- How to get a value of select with d3?
- d3 can not plot date axes in safari, parsing error
- Trying to make d3js transitions shrink or grow to the next value
- D3js collapse objects with duplicate properties
- D3.js d3.json returns Uncaught TypeError: Cannot read property '0' of undefined
- Add a property to an element with D3 .datum()
- Animated Pie Bubbles dimple data
- Dynamically change background color of node in force directed graph
- d3 selectAll vs jQuery selector
- Uncaught ReferenceError: d3 is not defined
- mpld3 using d3v3 and d3v4 on the same html page
- d3 multiline update path and transition path does not work with nested data
- append svg:text below each rect element
- D3js: how to generate standalone SVG files? (Nodejs)
- D3 Collapsible Tree only drag without zoom and jump and scroll