CODEWITHSUNDEEP
javascriptd3.jschartsdc.jscrossfilter
marc esher
marc esher

Reputation: 4921

dc.js: extending line and area to end of chart

I'm trying to draw an area chart using dc.js, and the end date (i.e. far right) of the chart is based on the current date, not the last date in the dataset. In cases where there's a date gap between data points, I want the area to extend from one point to the next, not draw at 0.

Given this data:

    var data = [
    {domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "6/1/2014", lines_added: 100, lines_deleted: 50},
    {domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "7/1/2014", lines_added: 100, lines_deleted: 50}
        ];
var ndx = crossfilter(data);

The chart's line/area currently ends at the "7/1/2014" data point, but I want it to stretch the entire length of the chart.

The relevant code for drawing the chart is:

var dateDim = ndx.dimension(function(d) {return d.commit_date;});
var minDate = dateDim.bottom(1)[0].commit_date;
var maxDate = new Date();
var domainGroup = dateDim.group().reduceSum(function(d) {return d.cumulative_lines;});

unshippedlineChart
    .width(500).height(200)
    .dimension(dateDim) 
    .group(domainGroup)
    .renderArea(true)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .brushOn(false)
    .interpolate('step-after')
    .yAxisLabel("Unshipped Value");

Full example is at http://jsfiddle.net/xayhkcvn/1/

Upvotes: 0

Views: 257

Answers (1)

Gordon
Gordon

Reputation: 20150

You didn't actually ask a question :-), but I think you may be looking for ways to prefilter your data so that it gets extended to today, and to remove any zeros.

This stuff isn't built into dc.js, but there is some example code in the FAQ which may help. Specifically, there is a function remove_empty_bins which adapts a group to remove any zeros.

You could similarly define a function to add a final point (untested):

function duplicate_final_bin(source_group, key) {
    return {
        all:function () {
            var ret = Array.prototype.slice.call(source_group.all()); // copy array
            if(!ret.length) return ret;
            ret.push({key: key, value: ret[ret.length-1].value});
            return ret;
        }
    };
}

You can compose this with remove_empty_bins:

var super_group = duplicate_final_bin(remove_empty_bins(domainGroup), maxDate);

The idea is to create a wrapper object which dynamically adds or remove stuff from the (always changing) source_group.all() on demand. dc.js will call group.all() whenever it is redrawing, and these wrappers intercept that call and adapt the data the crossfilter group returns.

Upvotes: 0

Related Questions