CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
Nisha
Nisha

Reputation: 199

Making X-axis in cross filter dynamic

I am learning d3 and crossfilter. I have plotted a chart using crossfilter and dc by reading data from a json file.However, My json file is a dynamic one.It keeps on updating. I was following the example on (http://dc-js.github.io/dc.js/) where the X-axis is being pre-defined and restricted to a range by using

.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))

However, this is a problem for my case where the json file is getting updated every time.Is there a work around for this? Can the X and Y axis both be made elastic?If yes, then how? My code looks like this:

  var facts = crossfilter(result);
  var barChart1 = dc.barChart("#dc-marketing-chart");
  var devValue = facts.dimension(function (d) {return d.date_hour;});
  var devValueGroupSum = devValue.group().reduceSum(function(d) { return d.metric;})
  barChart1.width(960)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(devValue)
    .group(devValueGroupSum)
    .transitionDuration(500)
    .elasticY(true)
    .x(d3.time.scale().domain([new Date(2014, 4, 1), new Date(2014, 4, 14)]))
    .xAxis();
    dc.renderAll();

}

Problem Solved.!!.Try this snippet:

 var facts = crossfilter(result);
 var barChart1 = dc.barChart("#dc-marketing-chart");
 var devValue = facts.dimension(function (d) {return d.date_hour;});
 var devValueGroupSum = devValue.group().reduceSum(function(d) { return d.metric;});
 var minDate = devValue.bottom(1)[0].date_hour;
 var maxDate = devValue.top(1)[0].date_hour;
 barChart1.width(960)
 .height(150)
 .margins({top: 10, right: 10, bottom: 20, left: 40})
 .dimension(devValue)
 .group(devValueGroupSum)
 .transitionDuration(500)
 .elasticY(true)
 .x(d3.time.scale().domain([minDate,maxDate]))
 .xAxis();
 dc.renderAll();

 }

Upvotes: 3

Views: 1795

Answers (1)

Gordon
Gordon

Reputation: 20120

You can try .elasticX(true) but I think there may be some bugs lurking there.

Believe it works better in version 1.6 than in 2.0.

Please file a bug on dc.js if it doesn't work.

Upvotes: 3

Related Questions