I've just finished a video on Lynda.com and can't get the same results the instructor gets using D3. I've created a simpler version of the files in question, and it still doesn't work. The console outputs NaN when I try to retrieve a date.
The CSV, as output from Excel, is:
Date,AM
1995-04-16,3.5
1995-04-17,14.0
1995-04-18,10.8
and the Javascript file contains:
d3.csv("bg_test_date_parsing.csv", function(d) {
return { Date: +d.Date, AM: +d["AM"] };
}, function(data) {
console.log(data[1]);
});
The console in Mozilla gives me:
Object { Date: NaN, AM: 14 }
I can't proceed with any projects because I don't know where to start with importing dates properly. Videos on lynda.com just keep going, and I still don't get how to import and format dates. Also, the CSV originally was formatted 16-04-1995 as an example, outputted from a medical instrument, and I manually typed it into a year-month-day format that apparently D3 will work with. It took me many hours already using Google to get this far, so I'm obviously missing some key understanding.
+d.Date isn't working the way you want. Calling + on 16-04-1995 is resulting in NaN. You can't convert that string to a number like that.
You can convert the string like this, var myDate = new Date('04-16-1995')
Unfortunately, your format is day-month-year, and javascript wants month-day-year.
See this question for what to do about that:
Convert dd-mm-yyyy string to date
Update As #GerardoFurtado notes in his comment, the d3 library has some built in date parsing options that can convert dates in different formats. See the links in his comment.
Using d3, you could convert the string to a Date like this:
var myDate = d3.timeParse("%d-%m-%Y")('16-04-1995')
or, within your loop:
Date: d3.timeParse("%d-%m-%Y")(d.Date)
Related
DataTables properly sort dates in YYYY-MM-DD format only. All other formats they sort as string.
As far as I'm not a fan of adding a library / plugin for every functionality into my projects I tried to solve it by myself.
DataTables are using Date.parse() function to "understand" the date and sort it. (according to https://datatables.net/blog/2014-12-18).
So I decided to override that function and modify it in the way it will "understand" also other date formats.
I added this JS into my code:
let origFunction = Date.parse;
Date.parse = function(str) {
// I want to parse this date format: 27.01.2018
if (str.indexOf('.') > 0) {
str = convertDateToISO(str); // my function translates date into 2018-01-27
}
return origFunction(str);
};
When I test this in the browser console, Date.parse works perfectly fine with my date format, but DataTables keep sorting my european dates as strings.
Any idea what I'm doing wrong? Or is it possible to do it this way?
SOLVED:
After all it looks like really the easiest way is to include "Moment.js" plugin as described here: https://datatables.net/blog/2014-12-18#Operation
But while there was a "no plugin" requirement in my question, I'm accepting answer of #billynoah as a solution too.
You probably want to take a look at orthogonal-data. This allows you to define a custom value for sorting your column. In this case, the most straightforward thing to do is use a timestamp for sorting and then you can display date in any format you want. For data sourced from an object or ajax you can structure your column definition like:
{
data: 'date',
render: {
_: 'display',
sort: 'timestamp'
}
}
For html source you can use the data-order attribute:
<td data-order="1545466488">Sat, Dec 22nd 2018</td>
(Disclaimer / Attribution: This is all more or less straight out of the manual linked above)
I expect that stringResult will give me an output that corresponds to the specified format, but it always looks like YYYY-MM-DD HH:MM
Full code here.
For example, I've tried the following config:
{
view:"datepicker",
stringResult:true,
format:"%Y-%F-%d"
},
But the output is still the same. So, is it a bug? Or am I doing something wrong? Thank you in advance!
[Updated]
As mentioned by Loj, I agree with it. Thus, there are 2 solutions possible:
1. Custom Format
The format property you have used sets a date format to display in the datepicker field. So, it is just the display format and it is not actually formatted. Hence, the stringResult returns date as string with the default format.
In order to get the custom date in the output, you are required to add your custom format which will convert the date in the desired format.
var format = webix.Date.dateToStr("%Y-%F-%d");
Check the snippet here.
2. Using getText()
Using stringResult property in the control's configuration makes the getValue method to return raw unformatted value. Hence, instead you should use the getText() as
$$("custom").getText();
in your code to get the formatted output via stringResult.
My input excel sheet has field "date" with two different types of values as shown below
2015-03-02 11:06:35
3/2/2015 4:03:53 AM
I am reading them as "string" and performing below logic
var temp = date.getString();
temp = str2date(temp,"dd.MM.yyyy HH:mm:ss");
I get the below error
*Could not apply the given format dd.MM.yyyy HH:mm:ss on the string for 2015-03-02 11:06:35 : Format.parseObject(String) failed*
I tried reading them as "date" , but I got the below error
Unparseable date: " 2015-03-02 11:06:35 "
How can we handle this error?
A couple ideas from the docs. http://wiki.pentaho.com/display/EAI/JavaScript+Values
First try calling getDate() it should be a function associated with the cell in question.
If that doesn't work try calling getNumber() in excel all dates are represented in floating point. The whole number part is days since jan 1 1970 and the fraction part is the percentage of the way through the day. I'm sure if you look around there is a js wrapper around this functionality.
Another idea would be to determine all the numberformat strings. Loop over them catching errors. The one that doesn't throw an error should be the correct one. Or you could write a small regex pattern to better examine the dates coming out.
Finally, I got result. I will explain step by step please follow steps very carefully.
Step 1: Data Grid => I created one field called fail_date i.e String datatype.
Step 2: Modified Java Script Value => I wrote some code like these.Please follow screen shot.
Step 3: Select values => Here i converted date datatype.
Step 4: Modified Java Script Value 2 => Here also i wrote one code.Please follow screen shot.
Step 5: Select values => Finally, I converted require data format.here correct_date field is your required output.
Step 6: Final output screen will be like these.
Step 7: Below screen shot show whole transformation screen.
Hope this helps.
Can you use a library. I've used xdate its really good. And it parses both of these date strings
var xdate = require('xdate');
xdate('2015-03-02 11:06:35').toDate(); // returns a js date object
xdate('3/2/2015 4:03:53 AM').toDate(); // returns another js date object.
Objective: To export data displayed in jqGrid as CSV maintaining existing formatting. Make a generic utility to be used across multiple webpages using jqGrid for exporting data.
Thanks to excellent questions posted for exporting data before, I am able to create a csv formatted data from jqgrid and pass it to backend to be saved as .csv file.
Steps Taken:
Used jqGrid('getGridParam', 'data') to get all row data
Used jqGrid('getGridParam', 'colNames') to get colnames
Created a tab separated output- No issues.
Problem: Since I used 'data', the column values are the raw values and not the formatted values.
For eg, from backend the date comes as a long -1411674947000 but using custom formatter in jqgrid it displays as 2014-09-25 19:55:47.
Similarly there are error codes which come as numeric values but formatted to show some text.
The objective is to use the formatted value eg '2014-09-25 19:55:47' in the csv output instead of '1411674947000'.
Not sure exactly how the data becomes a CSV - but before you export the data, you could use Javascript's toUTCString() function to convert the timestamps into human-readable strings:
var oldDate = new Date(1411674947000);
var newDate = oldDate.toUTCString();
console.log(newDate); // Thu, 25 Sep 2014 19:55:47 GMT
Here's a JSFiddle.
I am trying setting up the Fullcalendar JQuery plugin with a JSON feed. It is not working, so I tried with the provided example with the plugin, and it works with that, so it is clearly a problem with my feed.
Here is the output of the example JSON feed (which works):
http://pastebin.com/wFGdhEqu
And here, the output of my JSON feed, which is not working:
http://pastebin.com/UyN4c6yc
Can anyone see anything wrong with the syntax?
The output worked when I printed it inside the .js config with PHP (well, I only changed one things after it wouldnt work: i put quotes on the property names), so I think the data is good...
EDIT: fixed second link
Run your invalid JSON through a validator like JSONLint. It might be quicker than asking people to hand-validate your output.
Updated:
It is easier to work with small sets of data at first than large. You have a couple of problems with your JSON:
Use double quotes, not single quotes
Use a date rather than new Date('xx-xx-xxxx')
Here is a sample of valid JSON using your data:
[
{
"title": "1",
"start": "2011-01-01",
"className": "ottype1"
},
{
"title": "2",
"start": "2011-01-02",
"className": "ottype1"
}
]
If you are creating your JSON by hand (which appears to be the case"), find a library to create your JSON for you.
This is your JSON
, 'start': new Date ('2011-01-01'),
this is the example JSON
,"start":"2011-06-10",
The date formatting is very very very very very very very... buggy.But- the newest version is supposed to be more relaxed.
This is a quote directly from the Documentation.
http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
start Date. Required.
The date/time an event begins.
When specifying Event Objects for
events or eventSources, you may
specify a string in IETF format (ex:
"Wed, 18 Oct 2009 13:00:00 EST"), a
string in ISO8601 format (ex:
"2009-11-05T13:15:30Z") or a UNIX
timestamp.
Notice the 'T' in the time not all serialzers put this 'T' in - so be carefull for that too. And the 'Z' is 'no-time-zoning'; but this can be a pain for people from other countries.. again- also buggy.
And here is a very complex JSON from my site the beggining..
[{"title":"Tee Times","start":"2011-06-30T00:00:00","end":"2011-06-30T00:00:00","allDay":true,"color":"rgb(21,144,51)","groupsize":"","className":"data-brs clickable","cache":null,"EventName":null,"description":null,"EventCompTypeMSP":null,"url":null,"ID":null,"ID2":null,"CompName":null,"CompCourseName":null,"CompNumberDivs":null,"CompQualifierYN":null,"CompNumber":null},{"title":"Test","start":"2011
.. carries on for pages and end
ompetitions.aspx?compID=1088909","ID":40,"ID2":1088909,"CompName":"March Medal","CompCourseName":"Red Tee's","CompNumberDivs":1,"CompQualifierYN":"Y","CompNumber":40}]