elasticX not working in this example

[tvinci]

I've created a pie chart broken down by year and I've set the min and max range for the line chart based off the dimension. However, when I select a year, the range does not update. Am I doing something wrong?

var yearRingChart = dc.pieChart("#chart-ring-year");
var tpslineChart = dc.lineChart("#chart-tps");

var data2 = [
{date: "10/01/2012", hits: 1, tps: 100, http_status:200},
{date: "10/01/2012", hits: 1, tps: 90, http_status:302},
{date: "01/02/2013", hits: 1, tps: 100, http_status:200},
{date: "01/02/2013", hits: 1, tps: 10, http_status:302},
{date: "01/03/2013", hits: 0, tps: 300, http_status:200},
{date: "01/03/2013", hits: 1, tps: 10, http_status:302},
{date: "01/04/2013", hits: 1, tps: 90, http_status:200},
{date: "01/04/2013", hits: 1, tps: 0, http_status:302},
];

var ndx2 = crossfilter(data2);
// normalize/parse data
var parseDate = d3.time.format("%m/%d/%Y").parse;

data2.forEach(function(d) {
d.date = parseDate(d.date);
d.Year=d.date.getFullYear();
});

var yearDim = ndx2.dimension(function(d) {return +d.Year;});
var tpsDim = ndx2.dimension(function(d) {return d.date;});

var tps_total = yearDim.group().reduceSum(function(d) {return d.tps;});
var tps_graph = tpsDim.group().reduceSum(function(d) {return d.tps;});

var minDate = tpsDim.bottom(1)[0].date;
var maxDate = tpsDim.top(1)[0].date;

yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(tps_total)
.innerRadius(50);

tpslineChart
.width(500).height(200)
.dimension(tpsDim)
.group(tps_graph)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.day)
.yAxisLabel("TPS")
.elasticY(true)
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
//.renderlet(function (chart) {chart.selectAll("g.x text").attr('dx', '-30').attr('transform', "rotate(-90)");})
;

dc.renderAll();

Below is a link to the fiddle
http://jsfiddle.net/tvinci/J9ghN/

[tvinci]

By default the x-axis is set to not change on redraw. This can be changed by setting .elasticX(true). However, this still won't fix the issue. I've coded the following workaround which seems to work. It seems like there would be a better way to do this with dc.js. Is this a bug since dc.js isn't picking up the updated values?

$('#chart-ring-year').on('click', function(){
    var minDate2 = tpsDim.bottom(1)[0].date;
    var maxDate2 = tpsDim.top(1)[0].date;
    tpslineChart.x(d3.time.scale().domain([minDate2,maxDate2]));
    tpslineChart.redraw();

});

Updated fiddle can be found here: http://jsfiddle.net/tvinci/mXsHf/

[gordonwoodhull]

Yeah, that looks like you are doing elasticX manually, all right.

This looks an awful lot like #593. Let's see if fixing that fixes this.

[gordonwoodhull]

Please check - elasticX was effectively disabled because the stack mixin was filtering the data on the current domain. Fixed in fd1b44b

[gordonwoodhull]

Keeping this open to create a test case.