0

So, I have a dc bar chart for the following json dataset (simplified view):

[{"p":0,"d":0, "M":435},{"p":1, "d":2, "M":574},{"p":0, "d":1, "M":687}...]

Ideally, I would have had platform instead of p, device instead of d, and then correspondingly, 0 for platform would be mobile, 1 for platform would be corewebsite and similarly for device. I've replaced these names with letters and numbers in order to have a smaller json file to be requested. (My dataset is crazy huge!) M is the metric i want to sum.

I've created a dc bar you can see in below code:

var pfmValue = facts.dimension(function(d) {return d.p;});
var pfmValueGroupSum = pfmValue.group().reduceSum(function(d) {return d.M;});

barChart.width(280)
.height(200)
.margins({top: 10, right: 10, bottom: 20, left: 80})
.dimension(pfmValue)                                
.group(pfmValueGroupSum)                            
.transitionDuration(800)
.centerBar(true)    
.gap(120)                                            
.x(d3.scale.ordinal().domain(["0", "1"])) ---> I want this to display "mobile" and "corewebsite" instead!
.elasticY(true)
.xUnits(dc.units.ordinal);

How do I go about customizing my d3.scale.ordinal().domain so as to display the actual names on the x axis? Thank you!

Also, any suggestions on how I can compress my json file even more would be appreciated.

EDIT1: I used the following:

.x(d3.scale.ordinal().domain(data.map(function (d){ if (d.p = 0) {return "Corewebsite";} else if (d.p = 1) {return "mobile";}; })))

This got it to display the required labels for x-axis, but the bars overlap on top of each other, while the labels appear fine. Any workaround for this?

EDIT2: Learnt that my previous understanding of this function was flawed. Nevertheless, even the following gave the same result as above (Edit1):

.x(d3.scale.ordinal().range([0,1]).domain(["corewebsite", "mobile"]))
Gareth Rees
  • 64,967
  • 9
  • 133
  • 163
Shiva
  • 473
  • 1
  • 6
  • 21

1 Answers1

0

The reason your labels overlap is that they are too close to each other. And the reason for that is that the width is too small. These could be the possible solutions:

Community
  • 1
  • 1
Elvis
  • 23
  • 1
  • 5
  • Hey Elvis. I updated my question; I see how it might've been misleading. The labels themselves are fine. It is the bars of the chart that are on top of each other. How do I get rid of this, and place the bars where the labels are? Thanks. – Shiva May 02 '14 at 15:03