remove time from dates when shown on highchart - javascript

how can i remove the time from the date when shown on the highchart.the data (dates) are received from a twitter get request and saved into an array.
for (var i in array) {
dateArray.push(array[i].date);
}
highchart(dateArray);
an example of date shown on the graph: Sat,04 Aug 2012 19:35:02 +0000

The way I see it you have two options:
Only pass in the day value of the time for your categories. Involves processing on the backend.
Pull your data as-is and convert to Javascript time format, make your xAxis datetime type, set up your tickInterval to be one day, and run your chart.
Without know what your data looks like, what you are plotting on the yAxis, or what your expected outcome is it is really hard to say.
I recommend to go with option #2 because this is time based data.

EDIT: Based on your comments
You can first convert the string to a date object, and then format the date object to your liking using SimpleDateFormat.
SimpleDateFormat format = new SimpleDateFormat("EEE, MMM d yyyy");
String formattedDate = format.format(new Date(array[i].date));
dateArray.push(formattedDate);
You can find various date formats # http://blog.stevenlevithan.com/archives/date-time-format

Related

How to "use" TIMESTAMP postgres data type

I have saved a datetime value created by Luxon into a postgres database column, of type TIMESTAMP(3). I want to then use that value, convert it into other time zones, etc. However, I can't seem to figure out how to "use" it.
I created the object using the following
const { DateTime } = require("luxon");
const myDate = DateTime.now().toUTC().toISO()
I then inserted it into a postgres database, into a column of type TIMESTAMP(3).
I extract it out of the database using a query. When I log it, it says its value is:
console.log(extracted_date); //=> "2021-12-27T09:57:16.184Z"
console.log(typeof extracted_date); //=> object
// The following return "unparsable" or undefined objects
DateTime.fromISO(extracted_date);
DateTime.fromObject(extracted_date);
I can find plenty of tutorials about how to insert dates into sql, but nothing on how to take that date object and actually do something with it. I want to, for instance, convert its time zone.
To use that date object you can initiate a new Date, like so:
console.log(extracted_date); //=> "2021-12-27T09:57:16.184Z"
const javascriptDate = new Date(extracted_date);
Than you can use it directly or with the luxon library.
console.log(javascriptDate.toGMTString()); // => "Mon, 27 Dec 2021 09:57:16 GMT"
console.log(javascriptDate.toISOString()); // => "2021-12-27T09:57:16.184Z"
console.log(javascriptDate.valueOf()); // => 1640599036184
This object core is actually, a value that represents milliseconds since 1 January 1970 UTC, and added to that are time and string parsing functions, generally speaking.
More Info
In some systems dates are store in the database as the value -
date.valueOf() - which make it clearer (for a developer) you have to manipulate it, and perhaps reduce problems of showing the wrong timestamp to users. In the other hand - you lose the readability. Another opion is using only UTC time in your system and convert the timestamp on client side or before presenting the data. The use of UTC will make sure all of your dates will have same language'.
If you want to read more about timestamp,
here are some references:
UTC vs ISO format for time
What is the "right" JSON date format?

Kind of time (yyyymmddThhmmZ)

I'm trying to generate links to Google calendar and see this tool:
https://decomaan.github.io/google-calendar-link-generator/
And the links are generated as:
https://www.google.com/calendar/render?action=TEMPLATE&text=Appointment+with+VULKOVICH%2C+BILL&details=a+Description&location=a+Location&dates=20210105T103300Z%2F20210114T103300Z
and as you can see the dates are like:
20210105T103300Z
and I am trying to convert this to my own dates but I don't know which type is this and how to format. I have the dates both, in moment or in date, but don't know how to convert.
That's ISO-8601
The first part is the date in year-month-date order, the second part is the time and the final letter indicates the timezone (here Z for 'Zulu')
Since you're using moment.js: moment().utc().format('YYYYMMDDTHHmmss[Z]'), or without a library new Date().toISOString().replace(/\W/g,'').replace(/\d{3}Z/,'Z'). This is really a duplicate of How to format a JavaScript date.
Source: comment by RobG Jan 11 at 12:58

Format column header dates in FullCalendar

I've been trying to change the format of the dates that appear in the day column headers on the Fullcalendar week/timegrid view:
I'm using V5 in conjuction with moment.js.
Searching through the docs, I ended up here: https://fullcalendar.io/docs/v5/day-header-render-hooks
This is the code I've tried when initialising the calendar:
dayHeaderFormat: function(date){
return moment(date.weekday).format('ddd');
}
This results in showing today (Thu) for every header, rather than the correct days.
My next issue is that I'm not sure how to format the rest of the date accordingly - this targets the 'weekday' element of the date object, but I couldn't figure out how to format the whole date in one go (if that's possible). I'm looking to simply display 'Thu 14th', for example.
Any help or advice appreciated!
dayHeaderContent: (args) => {
return moment(args.date).format('ddd Do')
}
The new function supplies args instead of date object. So you access them with args.date and then format using moment

Highchart dates do not work for some data series

I am encountering a problem with my chart created with HighCharts (StockChart), and more precisely with the dates which do not apply for certain data series and are set by default in 1970.
I get the data from ajax request and I create my data series with the Highchart format as below:
data.forEach(element => {
var d = new Date(Date.parse(element[0]));
console.log("d : " + d);
timestampData.push([d, element[1]]);
});
console.log(timestampData);
timestampData = timestampData.sort((a, b) => a[0] - b[0]);
chart.series[0].setData(timestampData, true);
And here is the result for both cases the date format is exactly the same and yet the date applies for one series but not for the other
Here the date works
Here the date is to 1970 but when can see the date result in console is to 2019
This is strange because nothing is done differently for the two series and the conversion to Date format is good for the two series
About the logged dates, it's hard to debug without knowing the value of element iterator, but Date.parse() can have ambiguous results, depending on the format of its argument.
In general, my advice is to use js millisecond timestamps instead of Date objects like so:
data.forEach(element => {
var d = new Date(Date.parse(element[0]));
timestampData.push([d.valueOf(), element[1]]);
});
It's more universal and highcharts responds fine to it.

Jqgrid Date sorting issue with day name and date column

In my Jqgrid table I have a column which has dayName, Date as value,
like, Wed, 01-03-217,
But when I add complete data having days as Tue or Thu, jqgrid shows undefined, NaN-NaN-NaN as column values for both days,
I am using Jqgrid versoin 4.6.0
I have also prepare demo at fiddle. http://jsfiddle.net/alpeshjikadra/jss5b43j/1/
Let me know if anyone knows how to solve this
Thanks
The usage of localized format as the input data (texts like "Thu") in the date is bad practice in general. It's better to change the format of data to use ISO 8601 date format. I mean to post the date "Thu, 09-03-2017" like "2017-03-09".
If you really can't change the format of input data, I could suggest you the following workaround: you can include the line
$.jgrid.formatter.date.parseRe = /[,\s\-]/;
in your code. The parseRe be used internally for parsing the dates. The input format which you use, for example, "Thu, 09-03-2017" contains -, spaces and , as separators between the parts of the date. The regex /[,\s\-]/ corresponds the format.
Resulting demo will be http://jsfiddle.net/OlegKi/jss5b43j/6/
I think there's something with the formatting.
Try removing the ',' from your invdate property strings in mydata eg.: {id:"1", invdate:"Wed 01-03-2017"}
It works for some reason.

Categories

Resources