D3 Chart Missing Data

I have a d3 line graph which works perfectly. It maps the number of telephone calls and emails received in the current month or current year. However, the only issue is that if pho

Solution 1:

I will assume some points:

You are receiving from your data source year's array of month's arrays (if you are receiving month by month you will have to make a Get request for each month, it's pretty easy, but I hope you have a route giving you data on year, would not be cool to do 12 http get for this result) data like:

[
    {
        month: "January",
        data: [{
        "Type": "Email",
        "DataPoints": 
            [{
                "xValue": 1,
                "Value": 17
            },
            {
                "xValue": 2,
                "Value": 59
            }]
        },
        {
            "Type": "Phone",
            "DataPoints": [{
                "xValue": 1,
                "Value": 1
            }]
        }]
    }
    },{
    month: "February",
    data: [...]
    },
    ...
]

I will do that client side in Js:

Assuming each month is 31 days, i'm too lazy to think about doing it exactly but it shoudn't be that difficult, and xValue is the day of the month.

functioncompleteMonths(data){
    _.each(data, function(month){
        _.each(month.data, function(typeSource){
            for(var i = 1; i < 32; i++){
                var dayOnList = _.some(typeSource.DataPoints, function(day){
                    return day.xValue == i;
                });
                if(!dayOnList)
                    typeSource.DataPoints.push({xValue: i, Value: 0});
            }
            typeSource.DataPoints = _.sortBy(typeSource.DataPoints, function(ite){
                return ite.xValue;
            });
        });
    });

    return data;
}

Probably not the more optimized code, but I've tried it and it's working. Actually I think it would be better to map the month's days present, and reject them from and 1 to 31 array. Btw your Json isn't well formatted, you're missing a closing "]".

Solution 2:

With JSON structured like:

[{"Type":"Email","DataPoints":[{"xValue":1,"Value":17},{"xValue":2,"Value":59}]},{"Type":"Phone","DataPoints":[{"xValue":1,"Value":1}]}]

And assuming your DataPoints array is sorted by xValue and 31 days in the month:

var maxDaysInMonth = 31;
// for each dataset
dataset.forEach(function(d){
  // loop our monthfor (var i = 1; i <= maxDaysInMonth; i++){
    // if there's no xValue at that locationif (!d.DataPoints.some(function(v){ return (v.xValue === i) })){
      // add a zero in place
      d.values.splice((i - 1), 0, {xValue: i, Value: 0});
    }
  }
});