I have a data array like this:
var data = [{"Alphabet_Type":"a"}, {"Alphabet_Type":"b"}, {"Alphabet_Type":"a"}];
I am using:
- dc.js
- crossfilter.js
- d3.js
I want to create a bar chart with:
- the x-axis having an alphabet name, and
- the y-axis having number of occurrences of the alphabet.
Question: How can I plot a bar chart with an ordinal scale on the x-axis?
My code:
var data = [{"Alphabet_Type":"a"}, {"Alphabet_Type":"b"}, {"Alphabet_Type":"a"}];
var Filter = crossfilter(data);
var Dimension = Filter.dimension(function (d) { return d.Alphabet_Type; });
var Group = Dimension.group();
dc.barChart("#bar-chart")
.width(800)
.height(275)
.transitionDuration(0)
.margins({ top: 10, right: 50, bottom: 30, left: 40 })
.dimension(Dimension)
.group(Group)
.elasticY(false)
.elasticX(false)
.x(d3.scale.linear().domain([-1, 10]))
.y(d3.scale.linear().domain([0, 5]))
.centerBar(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.brushOn(false);
Finally, I have another problem which is that Alphabet_Type
is not going to have predictable values. So I need to fetch the values for Alphabet_Type
via crossfilter.js and incorporate those values into the domain. How can I do this?