CODEWITHSUNDEEP
javascriptd3.jscharts
Daniel.V
Daniel.V

Reputation: 2492

D3 how to draw chart with a x data between two y data

I want to draw chart that can set x between two y for example I want to draw a chart with x=100 and y1=200 , y2=500 just vertical line with good detail which chart can do that for me something like this image
enter image description here

With specific x and y Which chart I should use to draw this

Upvotes: 3

Views: 845

Answers (1)

Roshan
Roshan

Reputation: 2184

Here you can see how to make Bar Chart using d3.js

Bar chart using d3

Now the thing thing that you are trying to achieve is called floating Bar Chart.Although there is not any ready-made Floating bar chart available in d3. But we can achieve it by doing certain change in Bar chart itself. When we are appending Rectangle in bar classes in the above example just change the height attribute to

 .attr("height", function(d) { return height - y(d.higher-d.lower)

In this way it gives rectangle from the point lower to higher. Json is in this format

var jsonData=[
 {"letter": "A", "higher": .08,"lower": .05},
 {"letter": "B", "higher": .05,"lower": .03},
 {"letter": "C", "higher": .04,"lower": .02}   
]

SEE DEMO HERE

And for learning d3.js follow this link

Upvotes: 3

Related Questions