I made a chart on d3js and on my Xaxis I have some months to show. My time parsing function d3.timeParse("%Y-%m") returns me only months like 'January , February'.
But I would like to get these months in this format : 'Jan-2019, Feb-2019'. What can I do pls?
You could use the abbreviated month(%b) specifier string to get the abbreviated/shortform month names.
If you want the dates to be formatted as Jan-2019, and Feb-2019, you can do the following:
const formatMonth = d3.timeFormat('%b-%Y');
const date = new Date(2014, 1, 1);
console.log(formatMonth(date));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
You may read find the supported specifier formats for d3.timeParse over here.
Related
I want to make a query in crossfilter to filter all data from today's date.
Example: I have this query:
var countPerDim2 = Dim2.filterExact("1.1.2018").group().reduceSum();
So crossfilter will filter data from 1.1.2018.
But I want crossfilter to automatically get the the current date.
My reason is that I want to draw two charts to compare them.
Like :
Chart 1 by Date 1.1.2018 and Chart 2 by Date 31.12.17
How can I get the filter by yesterday's date? Is there a function like datenow() for the current day and maybe datenow(-1) for yesterday's date?
Thank you and happy new year!
Today and yesterday
To answer your immediate question, JavaScript's new Date() will return the current time and date as a JavaScript Date object. Then you just need to convert the date object to a string to match your date format.
You can use d3.time.format to produce those strings. Looks like you would want something like
d3.time.format('%-d.%-m.%Y')
(or perhaps with m and d reversed - unclear from your example whether month or day comes first)
Yesterday is something like
var date = new Date();
date.setDate(date.getDate()-1);
See the JavaScript Date documentation for more details.
Comparing two days
However, I think you'll run into a more fundamental problem, which is that crossfilter doesn't have the concept of multiple filters, so it's hard to compare one date against another in side-by-side charts.
Off the top of my head, the best thing I can think of is to "freeze" a group using a fake group:
function freeze_group(group) {
var _all = group.all().slice();
return {
all: function() {
return _all;
}
};
}
You'd apply one date filter, then call
chart.group(freeze_group(group));
on the chart you want to have that date. Now it won't change when the filter changes, and you can apply the other date filter for other charts.
As my first exploration in D3.js,there is a datefield in the csv defined as '01/12/2016'.how to convert this to a proper d3.TimeFormat ?
Your Format is DD/MM/YYYY(01/12/2016)
Use the Following d3 time Format
var parseDate = d3.time.format("%d/%m/%Y").parse;
parseDate('YOUR DATE FORMAT');
I know there is a specified d3 time formatting. But when I check the example shown here d.Year = new Date(d.Year,0,1); the year's format is "1996"
Does it one of the other ways to format year as a string here, i don't quite understand it.
Also, if my time format is like"01/01/96", what is the right format to get the string here?
This isn't a d3 date formatting function. Its one of the basic forms of the Javascript Date constructor.
Specifically, it is using the multi-parameter form of the constructor:
new Date(year, month, day, hour, minute, second, millisecond);
except that all the time parameters are left as their default (0/midnight) values. If the original value for d.Year is the string "1996", the line
d.Year = new Date(d.Year,0,1);
creates a new Date object with year 1996 (the conversion from string to number will be automatic), month value zero (January), day value 1, and time midnight.
I'm trying to get a decimal value for a value that is expressed in a date. My problem is that I need only the time in the date, not the actual date itself. So here part of my .json data:
var data = [
{
"Id":"1390794254991",
"Tz":"Europe/Amsterdam",
"From":"27. 01. 2014 4:44",
"To":"27. 01. 2014 12:09",
"Sched":"08. 02. 2014 5:24",
"Hours":"7.430"
}]
So basically i would like to take the "From" value and get just the time returned in a decimal value. I don't think converting the time to a decimal number with Time Formatting, it's just the splitting of a value that seems pretty hard to me. Any of you guys have a clue how this could be achieved?
Thanks,
Cas
Edit: Okay, here we go. I made a JSFiddle to clear things up. Because there is a TIME (HH:MM) in my date, the rectangles in my barchart don't come on a specific day in the xAxis. INSTEAD they come out on a day AND time on the xAxis.
I just need it to be the specific date, not the date AND time.
I think I have to change something in the following part:
dataFiltered.forEach(function(d) {
d.From = parseDate(d.From);
});
Just don't really see what...
With d3, you'd construct a time parser, give it a string to parse, and get back a Date object.
var parser = d3.time.format('%d. %m. %Y %H:%M');
var date = parser.parse("05. 52. 2014 4:32");
Then you can do as you wish with this date object, including
var hours = date.getHours() // 4
var minutes = date.getMinutes() // 32
But, did you mean you don't want to use d3 (despite your question being tagged with d3)? If so, you can also use RegExp:
var dateString = "05. 52. 2014 4:32";
var matches = dateString.match(/(\d?\d):(\d\d)$/);
// yields ["4:32", "4", "32"]
Then you can get the tokens you want either via
var hours = matches[1];
var minutes = matches[2]
or
var hours = RegExp.$1;
var minutes = RegExp.$2
In either case though, RegExp gives you back strings, so you need to convert them to Numbers if you're doing quantitative stuff with them:
var hours = parseInt(matches[1]);
or more cryptically
var hours = +matches[1];
I have a column with data year&week. I would like to create a date axis based on this.
when i try to format the date, it is not working
I tried this:
var parseDate = d3.time.format("%Y-%W").parse;
d3.csv("temperatures_groups_2.csv", function(error, data) {
data.forEach(function(d,i) {
d.timestamp = parseDate(d.timestamp);
alert(d.timestamp);
d.temperature = +d.temperature;
}
});
i get null when the alert executes.
If i replace the same with d3.time.format("%Y-%m").parse, it works fine. It takes the month but not week no.
The csv contains data like this
timestamp,temperature
2013-01,19.5
2014-02,21.5
2015-03,20.5
2016-04,20.5
2017-05,21.25
The documentation says:
The following directives are not yet supported for parsing:
%U - week number of the year.
%W - week number of the year.
Hence you can't use D3 to parse these dates. You'll have to parse the date yourself or use another library, for example moment.js.
This works since version 3.2 and the documentation has been updated.
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
However, the format in your question won't work because the parser requires a specific date to be specified. E.g. by "%a". It would be nice to assume Sunday in the absence of a date specifier, but that's for another PR.