CODEWITHSUNDEEP
javascriptdated3.js
kwyoung11
kwyoung11

Reputation: 978

Changing time scale from days to weeks, how do I update and sum data values?

I am trying to have my barchart in d3.js update it's values when the user changes the time scale from days, to weeks or months. (i.e. when the time scale is changed to weeks, I want all the data values for each day in a given week summed together). For example, here is the default graph with the x-axis time scale in days:

x-Axis in days enter image description here

When a user changes the time scale to weeks and the x-axis updates, the data values remain grouped by day, as shown here:

x-Axis scale in weeks, but data values remain grouped by day: x-Axis scale in weeks, but data values remain grouped by day

What I want is for there to be only one bar for each week number of the year on the x-axis, showing the sum of all the data values the user provided for all 7 days of that week. How do I achieve this?

Does this have to be done on the server-side, or can it be on the client-side with javascript, or is there some easy d3.js way I'm overlooking?

This is what my data looks like:

[{"date":"2013-04-20","load_volume":400},{"date":"2013-04-23","load_volume":400},{"date":"2013-04-24","load_volume":400},{"date":"2013-04-28","load_volume":1732},{"date":"2013-04-30","load_volume":400}]

I figured to achieve this I could convert the date values to weekNumberOfYear format (for e.g., 17 for this week), push them into an array and remove all duplicates, then sum the data values for each of the days in that array. I did this and the data looked like this: 

[{"date":"15","load_volume":400},{"date":"16","load_volume":2532},{"date":"17","load_volume":400}]

However, I don't believe this is the correct approach because I always get an "Error: Invalid value for attribute x="NaN"" in the JS console. This I think is because I use the x scale to position the rects on my graph:

.attr("x", function(d) { return padding + x(new Date(d.date)); })

... which would result in x(Wed Dec 31 1969 19:00:00 GMT-0500 (EST)), which throws a NaN error.

I am now trying to format the date into %Y-%m-%d format and have it be the beginning Monday of each week, but I'm wondering if there is an easier solution since I've been at this all day.

Upvotes: 2

Views: 1778

Answers (1)

kwyoung11
kwyoung11

Reputation: 978

Well, I think I've figured it out. I just had to convert the dates to millisecond time and remove the double quotes I had around the date value in the JSON string (the double quotes were giving me a NaN error). I did this with the following function:

function getWeekDate(d) {
    d = new Date(d); // get current date
    var day = d.getDay();
    var diff = d.getDate() - day + (day == 0 ? -6 : 1); // Subtract day number of month from day number of week, and adjust when day is sunday
    var date = new Date(d.setDate(diff));
    return date.setHours(0);
}

which is adapted from this SO question.

Not sure if D3 has a better way of doing it. If I find out i'll post it here.

Upvotes: 2

Related Questions