CODEWITHSUNDEEP
d3.jsdc.js
stonk
stonk

Reputation: 315

dc.js line chart - Date Value issue

Okay, so I created a basic line chart where x = months and y = values as per the below CSV:

dates,purpose,num
01/04/2015,Commute,1
01/05/2015,Commute,15
01/06/2015,Commute,48
01/07/2015,Commute,4
01/08/2015,Commute,4
01/09/2015,Commute,52
01/10/2015,Commute,163
01/11/2015,Commute,222
01/12/2015,Commute,126
01/01/2016,Commute,174
01/02/2016,Commute,11
01/03/2016,Commute,15
01/04/2015,Walk,0
01/05/2015,Walk,600
01/06/2015,Walk,13
01/07/2015,Walk,1
01/08/2015,Walk,1
01/09/2015,Walk,14
01/10/2015,Walk,44
01/11/2015,Walk,60
01/12/2015,Walk,34
01/01/2016,Walk,47
01/02/2016,Walk,3
01/03/2016,Walk,900

HTML is as follows:

<head>
    <title>dc.js - Line Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
    </head>
    <body>

    <div id="test"></div>

    <script type="text/javascript" src="../js/d3.js"></script>
    <script type="text/javascript" src="../js/crossfilter.js"></script>
    <script type="text/javascript" src="../js/dc.js"></script>
    <script type="text/javascript">

    var Chart5 = dc.lineChart("#test");
    d3.csv("morley3.csv", function(data) {

    var dateFormat = d3.time.format("%d/%m/%Y");
    var numberFormat = d3.format(".2f");

    data.forEach(function(d) {
    d.dd = dateFormat.parse(d.dates);
    d.month = d3.time.month(d.dd);
    //d.day = d3.time.day(d.dd);
    //d.year = d.dd.getFullYear();
    //d.num = +d.num;
    //d.purpose = d.purpose;
    });

    var facts = crossfilter(data);
    var dateDimension = facts.dimension(function(d) {return d.month;});

    var dateDimension2 = facts.dimension(function(d) { if (d.purpose == "Walk") {return d.month;}});
    var numberByDate2 = dateDimension2.group().reduceSum(function(d) { return d.num; }); 

    minDate = dateDimension2.bottom(1)[0];
    maxDate = dateDimension2.top(1)[0];

    Chart5
    .renderArea(true)
    .width(900)
    .height(300)
    .renderArea(false)
    .brushOn(false)
    .dimension(dateDimension2)
    .group(numberByDate2)
    .x(d3.time.scale().domain([minDate, maxDate]))
    //        .xUnits(d3.time.day)
    renderHorizontalGridLines(true)
    .elasticX(true)
    .elasticY(true)
    .legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
    .valueAccessor(function (d) {return d.value;}) // What does this do?
    .yAxisLabel("")
    .xAxis();
    dc.renderAll();
    });

    </script>
    </body>
    </html>

I've asked to show just "Walk" and the result is showing the months ok in the correct order. The issue I'm having is that the first month is adding 835 to the result. This is the sum of all "num" where "purpose" = "Commute".

See pic here: http://tinypic.com/r/qx9kih/8

Any ideas where I'm going wrong?

Upvotes: 0

Views: 505

Answers (1)

Ethan Jewett
Ethan Jewett

Reputation: 6010

Dimension accessor functions must return naturally ordered values, and yours does not. If the values aren't naturally ordered, group calculations start randomly including incorrect records. Try changing your dimension to:

var dateDimension2 = facts.dimension(function(d) { return d.month; });
var numberByDate2 = dateDimension2.group().reduceSum(function(d) {
   if (d.purpose == "Walk") { return d.num } else { return 0; };
});

In other words, do your filtering in the sum accessor function rather than the dimension accessor function.

Upvotes: 1

Related Questions