CODEWITHSUNDEEP
javascriptd3.jsbar-chartdc.jscrossfilter
Mike Arledge
Mike Arledge

Reputation: 89

DC.js Bar Chart Bar Sizing

I have bar chart that is running DC.JS everything renders but I cannot get the spacing right on the bar. Labels are good, values are good, I thought an ordinal scale would work but nothing seems to tighten up the gap between bars.

http://codepen.io/MichaelArledge/pen/VeYVQr?editors=001

var dex;
var bar_chart = dc.barChart("#graph_area");
var zip_dim;
var zip_totals;

d3.json("https://data.cityofchicago.org/resource/4ijn-s7e5.json?$limit=50&$offset=0", function(data){

  dex = crossfilter(data);
  console.log(dex);
  zip_dim = dex.dimension(function(d){
    return d.zip
  });

  zip_totals = zip_dim.group();
  var all_info = zip_totals.all();
  bar_chart
    .width(500)
    .height(500)
    .x(d3.scale.ordinal().rangeRoundBands([0, 500]).domain(all_info.map(function(d){ return d.key }) ))
    .dimension(zip_dim)
    .group(zip_totals);

  bar_chart.render();
});


function print_filter(filter){
    var f=eval(filter);
    if (typeof(f.length) != "undefined") {}else{}
    if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
    if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
    console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
}

Upvotes: 0

Views: 406

Answers (1)

Mike Arledge
Mike Arledge

Reputation: 89

Main Issue:

Want to use ordinal scale in the .x function. Anything but linear scale causes irrational spacing and treats labels like numbers.

Answer: The .xUnits need to be set to dc.units.ordinal. The following post worked for me.

dc.js bar chart with ordinal x axis scale doesn't render correctly

Upvotes: 1

Related Questions