dc.js modify time scale x axis after filtering

Question

I am filtering, by date, a dc.js time series chart programmatically after a button click. I want the x-axis representing the time scale to change when my data filter is applied. Instead the xaxis remains the same, although the chart drops off on either side of the date. My situation can be demonstrated by a jsfiddle created in another question( Adding a filter in dc.js / Crossfilter not updating the chart) It's not clear to me whether that question was answered, but the jsfiddle suggested demonstrates the problem I'm having: http://jsfiddle.net/PYeFP/5/

You can see that when you click on the filter button, the data is appropriately filtered but the xAxis contains the same range of values.
I tried recreating the x scale and assigning it the chart's 'x'property: getCompositeDemandLine().x(xScale); //xScale contains new min, max dates

but that had no effect.

Is there way to cause the domain of the chart to change on filtering? If not, is there a way to remove the chart so it can be recreated?

var data = [ { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c4" }, "start" : { "$date" : 1361459258000 }, "tripId" : "29WUKABDBUC5", "os" : "iPhone OS 6.1", "device" : "iPhone 4", "length" : 10.02666666666667, "overdue" : 8.137777777777778, "status" : "COMPLETED", "vessel" : "GalataSaray", "clientVersion" : "1.0.58" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c5" }, "start" : { "$date" : 1361526164000 }, "tripId" : "5N3FXDFN4XWL", "os" : "Android 3.0.31", "device" : "Nexus S", "length" : -0.9272222222222222, "overdue" : -2.010833333333333, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c6" }, "start" : { "$date" : 1361718973000 }, "tripId" : "GYPWNTJLEYYQ", "os" : "Android 3.0.15", "device" : "GT-I9300", "length" : -1.001388888888889, "overdue" : -3.221388888888889, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c7" }, "start" : { "$date" : 1361719323000 }, "tripId" : "PZBRIAM6RYTU", "os" : "Android 3.0.15", "device" : "GT-I9300", "length" : -0.9963888888888889, "overdue" : -2.242777777777778, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c8" }, "start" : { "$date" : 1362594035000 }, "tripId" : "AHLNA5ITUXAW", "os" : "iPhone OS 6.0.1", "device" : "iPad 2", "length" : 0.4919444444444445, "overdue" : -0.6719444444444445, "status" : "COMPLETED", "vessel" : "vo10", "clientVersion" : "1.0.59" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c9" }, "start" : { "$date" : 1361532525000 }, "tripId" : "HKJMGKKJHFHT", "os" : "Android 3.0.31", "device" : "Nexus S", "length" : -0.9461111111111111, "overdue" : -2.161944444444444, "status" : "COMPLETED", "vessel" : "CG272", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7ca" }, "start" : { "$date" : 1361533803000 }, "tripId" : "O1CUWKOFNVVB", "os" : "iPhone OS 6.1", "device" : "iPhone 5 (GSM+CDMA)", "length" : 0.745, "overdue" : -0.9244444444444444, "status" : "COMPLETED", "vessel" : "Land Rover Discovery", "clientVersion" : "1.0.57" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cb" }, "start" : { "$date" : 1361570111000 }, "tripId" : "9EVYUPO8OGFX", "os" : "iPhone OS 6.1.2", "device" : "iPhone 5 (GSM+CDMA)", "length" : 10.00861111111111, "overdue" : 8.016111111111112, "status" : "COMPLETED", "vessel" : "fox echo", "clientVersion" : "1.0.59" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cc" }, "start" : { "$date" : 1361683861000 }, "tripId" : "4AC5Q0XDPXTB", "os" : "iPhone OS 6.1.2", "device" : "iPhone 5 (GSM+CDMA)", "length" : 1.006111111111111, "overdue" : 0.01416666666666667, "status" : "COMPLETED", "vessel" : "Jetski", "clientVersion" : "1.0.59" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cd" }, "start" : { "$date" : 1361695252000 }, "tripId" : "PDS8V2JSEDCL", "os" : "Android 3.0.31", "device" : "GT-I9305", "length" : 2.1225, "overdue" : -0.09722222222222222, "status" : "COMPLETED", "vessel" : "Energex Sandgate 1", "clientVersion" : "1.24" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7ce" }, "start" : { "$date" : 1361700162000 }, "tripId" : "NWT85M7LCELM", "os" : "Android 3.0.31", "device" : "Nexus S", "length" : -0.005555555555555556, "overdue" : -1.245, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.24" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cf" }, "start" : { "$date" : 1361720315000 }, "tripId" : "OTDQP5LTPW4M", "os" : "Android 3.0.15", "device" : "GT-I9300", "length" : -0.7230555555555556, "overdue" : -2.970555555555555, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7d0" }, "start" : { "$date" : 1361723166000 }, "tripId" : "YDBNGBTGPCLW", "os" : "Android 3.0.31", "device" : "GT-I9300", "length" : -0.9955555555555555, "overdue" : -2.242222222222222, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" }];

for (var i = 0; i < data.length; i++) {
    data[i].startDate = new Date(data[i].start.$date);
}

var tripsCx = crossfilter(data);
var allTripsGroup = tripsCx.groupAll();

var tripsByDateDimension = tripsCx.dimension(function (d) { return d.startDate; });
var tripsByDateGroup = tripsByDateDimension.group(d3.time.day);

 var tripVolume = dc.barChart("#trip-volume")
                   .width(600) // (optional) define chart width, :default = 200
                   .height(75) // (optional) define chart height, :default = 200
                   .transitionDuration(0) // (optional) define chart transition duration, :default = 500
                   .margins({ top: 10, right: 50, bottom: 30, left: 40 })
                   .dimension(tripsByDateDimension) // set dimension
                   .group(tripsByDateGroup) // set group
                   // (optional) whether chart should rescale y axis to fit data, :default = false
                   .elasticY(false)
                   // (optional) whether chart should rescale x axis to fit data, :default = false
                   .elasticX(false)
                   // define x scale
                   .x(d3.time.scale().domain([tripsByDateDimension.bottom(1)[0].startDate, tripsByDateDimension.top(1)[0].startDate ]))
                   // (optional) set filter brush rounding
                   .round(d3.time.day.round)
                   // define x axis units
                   .xUnits(d3.time.days)
                   // (optional) whether bar should be center to its x value, :default=false
                   .centerBar(true)
                   // (optional) render horizontal grid lines, :default=false
                   .renderHorizontalGridLines(true)
                   // (optional) render vertical grid lines, :default=false
                   .renderVerticalGridLines(true)
                   .brushOn(false);

            dc.renderAll();

$('#filter').on('click', function(){
    var minDate = tripsByDateDimension.top(5)[4].startDate;
    var maxDate = tripsByDateDimension.top(5)[0].startDate;
    console.log(tripVolume.filters());


    tripVolume.filter([minDate, maxDate]);
    tripVolume.x(d3.time.scale().domain([minDate,maxDate]));

    console.log(tripVolume.filters());

    dc.redrawAll()
});

Have you tried elasticX(true)? If I understand your question, that is what it is intended to do. github.com/dc-js/dc.js/blob/master/web/docs/… — Gordon
I have the same problem. I also have a time scale on the x axis where the chart is updated but not the axis. The y axis is updated correctly though. — Marcel Pfeiffer

user1079785 user1079785 · Accepted Answer · 2015-03-05T00:15:10

I don't have enough points to comment, but I can tell you my resolution to this problem. The elasticX(true) doesn't change a time series x-axis, in this filtering case anyway. What I ended up doing to get the effect I wanted was to remove the chart and recreate it with a dataset that I filtered.

dc.js modify time scale x axis after filtering

1 Answers