CODEWITHSUNDEEP
javascriptd3.js
zemirco
zemirco

Reputation: 16395

Grouped Bar Chart with different y-axis/scales

I'm trying to create a grouped bar chart with 70 samples and 2 series. Similar to this example:

http://bl.ocks.org/882152

However one series is [0 ... 1] and the other series is [0 ... 1.000.000]. I can't recreate the example with my numbers.

I also don't really get the example. Shouldn't be the variables switched, i.e. x -> y, y0 -> x0 and y1 -> x0? Or don't they stand for the x and y axis?

Thank's!

Edit:

Here is an example that demonstrates my problem (look in the console). http://jsfiddle.net/kQSGF/3/

Upvotes: 1

Views: 2212

Answers (1)

Josh
Josh

Reputation: 5480

The problem seems to come from the scale definition:

var x = d3.scale.linear().domain([0, 1]).range([h, 0]);

The domain is set to [0,1] but only your first data series actually falls in that range. you could consider setting the domain to the extent of your data, and reversing the output range so that it shows the values in your data instead of the 'non' value amount as a bar:

var x = d3.scale.linear().domain(d3.extent(d3.merge(data))).range([0,h]);

Note that you will still be unlikely to see your smaller data series, as the ranges of your data are so significantly different

Upvotes: 2

Related Questions