D3 Parse Date "2013-07-11T00:00:00" for line graph - javascript

How do I parse an array of dates like this: "2013-07-11T00:00:00", into something useable for a line graph? The graph will stretch back a full year.
I'm trying to create a dynamic graph like the one in the "Plotting a chart" section on this page.
It would be great if I could have the tick marks like that as well (Apr '13).
I'm currently using the following function in JavaScript:
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
But it doesn't work.

You have a trailing "Z" in your format specifier which makes your parser return null for the dates you give to it. Here's an example that works:
var parse = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
parse('2013-07-11T00:00:00'); // Thu Jul 11 2013 00:00:00 GMT+0200 (CEST)
You can use d3 time scales to display time-based axes with appropriate tick marks.
Edit:
I guess I misunderstood your question... here's another take which (hopefully) explains the usage of time scales and date formatting:
var scale = d3.time.scale(),
axis = d3.svg.axis(),
// Assuming you have your data as strings:
data = ['2013-07-11T00:00:00', '2013-08-11T00:00:00', ...],
range = [0, 500], // size of chart
domain = d3.extent(data, function (d) { // generate the data extent (min,max)
return new Date(d); // use Date instances for values
});
// Configure the scale with domain and range:
scale.domain(domain).range(range);
// Use the above scale for the axis:
axis.scale(scale)
// Print the dates in "Mmm dd" format:
.tickFormat(d3.time.format('%b %d'));
// Render the axis in your svg node:
svg.call(axis);

Related

How can I control the date format for d3 scaleTime and remove unwanted clock time ticks?

I'm trying to display a week's worth of data in an area chart, and would like to use scaleTime() to populate my x axis. I've converted the date strings to date objects, and the domain appears to be correct, but I can't get the x axis to display the format I want. What I would like to see are 7 tick marks with the day, month, and year displayed. Instead, I'm seeing the day of the week and the date, and there are additional tick marks displaying '12 PM', as in the attached picture.
I've tried specifying the number of tick marks, but then it gets even weirder, especially on month transitions, and might display something like 'Mon 29, Tues 30, Wed 31, November, Fri 2'.
Bottom line, am I missing something in how I'm implementing the scale, and if not, how might I go about fine-tuning the tick marks to only show what I want to see? The examples I've been able to find don't seem to run into the same problems I'm experiencing.
Current format of my date objects: "2020-07-22T06:00:00.000Z"
The code:
let x = d3.scaleTime().range([0, width-margin.right-margin.left])
let y = d3.scaleLinear().range([height-margin.bottom, margin.top])
x.domain([d3.min(area_data, d => d.date), d3.max(area_data, d=>d.date)])
y.domain([0, max_cases])
let xAxis = d3.axisBottom(x);
let yAxis = d3.axisLeft(y);
Thanks in advance.
You can do something like
const xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1), '%-d %b %Y');
The first argument to ticks says that you want one tick for each day. The second argument is a format specifier that defines how to format the dates as strings. '%-d %b %Y' shows the day with no padding, the abbreviated month name, and the full year. For example, 22 Nov 2021. You can modify this as needed to get your desired format.

Format labels on AG-Grid charts

How can I format the labels that appear on AG-Grid chart's axis? I have a lot of time-series data so I expect users frequently to produce charts where the horizontal axis is a date. Unfortunately, this produces unreadable chart labels because the dates are not formatted (see attached image) - The labels look like "Thu Jan 09 2020 00:00:00 GMT+0000 (Greenwich Mean Time)" when all I would like is simply "2020-01-09". My The dates in the grid look fine thanks to a valueFormatter for dates.
It is also very common for users to produce pivot tables using the date. This produces similarly terrible results for the labels, but I've found I can use "processSecondaryColGroupDef" to format dates that appear in the column headers. Is there a similar way to do this for charts?
Thankyou,
Troy.
From the docs -
For time axes, a format string can be provided, which will be used to
format the data for display as axis labels
You can either explicitly set the axis type to 'time', but you can also remove this and the chart will still use the time axis as it automatically detects the axis type from the data in the Date column.
You can implement processChartOptions callback and add your customizations -
processChartOptions(params) {
var options = params.options;
var dateFormatter = function(params) {
return params.value.value && para[enter link description here][1]ms.value.value.toLocaleDateString
? params.value.value.toLocaleDateString()
: params.value;
};
if (["line"].indexOf(params.type) < 0) {
if (options.xAxis && options.yAxis) {
options.xAxis.label.formatter = dateFormatter;
options.yAxis.label.formatter = dateFormatter;
}
} else {
options.xAxis.type = "time";
options.xAxis.label.format = "%d %B";
}
Example and details here

Show time durations on a d3 axis

I am currently creating a d3 axis using d3.time.scale.utc(). My input for the axis is a series of time offsets in minutes (with decimal values). For example:
var minuteOffsets = [0.03, 1.65, 3.22, ..., 89.91, 90.01];
I want to display these time offsets in mm:ss format on the axis. The axis labels can be at standard intervals, like so:
+------+------+-- ... --+------+------+-- ... --+------+
00:00 00:30 01:00 59:30 60:00 60:30 90:00 90:30
Note specifically that the minute value should show values >60. The seconds value has the normal range 0-59.
When I tried using .tickFormat(d3.time.format('%M:%S')), it wraps the minute value back to 00:00 after the 45:00 label. I also had a look at duration from moment.js, but I can't figure out how exactly to incorporate that into my code.
Based on the comment by Lars Kotthoff, I changed my scale to be a linear scale, instead of a time scale. Then I added a custom tickFormat function to do the necessary formatting.
I used MomentJS to first create a duration from the minute values, and then used the library moment-duration-format to produce the tick label in mm:ss format.
var axis = d3.svg.axis().tickFormat(function (d) {
return moment.duration(d, 'minutes')
.format('mm:ss', { trim: false });
});
This helps to avoid explicitly writing code for extracting the minute and second components, and then formatting them into a string.

d3js: time scaling and "1901"

I'm working with a time-based scatterplot and am using data which only parses times by month, hour and day. On my axis labels, I'm getting "1901". D3 seems to be choosing a year and displaying it. How can I easily get rid of this? I don't want any year displayed:
1901 example http://lmnts.lmnarchitects.com/wp-content/uploads/2014/04/2014-04-01-09_31_30-127.0.0.1_8020_Climate3_seattle-winter-temps.html.jpg
you need to set the tickFormat of your axis to display only months and days. The tickFormat receives a function that takes a date and returns a string. You can use d3.time.format to set the tick format:
var axis = d3.svg.axis()
// ... set more attributes
.tickFormat(d3.time.format('%b %d')); // Abbreviated month and decimal day (Apr 01)
Regards,

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
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:
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.
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.

Categories

Resources