CODEWITHSUNDEEP
javascriptd3.jscrossfilterdc.js
Victor Istomin
Victor Istomin

Reputation: 1156

dc.js x-axis default domain - strange results

I have noticed strange behavior while managing to make a simple bar chart with date by X-axis and integers by Y. Bar is generated correctly, but X axis looks strange: I don't set dimension and I'm sure that I have values from last month only (Jan 7 to now), but X axis is scaled to fit values from June 2013 to now.

So, I get 7 month empty on graphic and the little piece for my data during last month.

Can anyone suggest, where are these boundaries got from? I understand I probably have a bug in my code, but I haven't found any suitable information in dc's manual and have no idea where to search for it.

This is the way I'm using bar chart:

Create crossfilter for my data: filter = crossfilter(json);

Create dimension for plotted data: 

var dimension = filter.dimension(function(d){
    var result = new Date(d.last_connected);

    /* debug code to ensure I have no date older than last month */
    if (!('last-date-min' in document))
        document['last-date-min'] = result;
    else if (result < document['last-date-min'])
        document['last-date-min'] = result;
    /* debug code end */

    return result;
});

Dimension is created and I ensured by debugger that the oldest date is 'Jan 7, 2014'. Creating group and checking latest date during grouping: 

var group = dimension.group(function(d){
    var result = d3.time['day'].utc(d);

    /* debug code */
    if (!('late-date-dim-min' in document) )
        document['last-date-dim-min'] = result;
    else if (document['last-date-dim-min'] > result)
        document['last-date-dim-min'] = result;
    /* debug code end */

    return result;
});

Once group created, create chart and initialize X and Y axis: 

c = bar_chart('last-day-chart', dimension, group);
c.x(d3.time.scale.utc());
c.xAxis().tickFormat(date_formatter);
c.xAxisPadding(1);
c.yAxis().tickFormat(formatter);
c.filterPrinter(date_filter_printer);

That's all: now I have a dataset, I sure that dataset has no dates older than one month, but I still getting chart for a 7-months period. Where is the cause of problem?

Additionally, I added debugging renderlet to examine details after rendering and I see strange results: 

/* debug code */
c.renderlet( function(chart){
    debugger;
    var scale_x = c.x();
    var scale_range = scale_x.range();           // is [0;100] - why? What is this range?
    var min = document['last-date-min'];         // ok, Jan 2014
    var dim_min = document['last-date-dim-min']; // ok
    var scale_domain = scale_x.domain();         // is [0;63286] - why? What is 63286?
});
/**/

Upvotes: 1

Views: 863

Answers (1)

DJ Martin
DJ Martin

Reputation: 2579

This might be an issue with how you are parsing dates. My suspicion is that your code is reversing the month and the day.

Try something like:

var dateFormat = d3.time.format("%Y-%d-%m");
records.forEach(function(d) {
    d.date = dateFormat.parse(d.date);
});

Here is an example that uses a date formatter: http://jsfiddle.net/djmartin_umich/HAY2V/

Here is more information about this approach: https://github.com/mbostock/d3/wiki/Time-Formatting

Upvotes: 2

Related Questions