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.
Related
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?
I need to compare two dates in my code and to make sure I don't make any mistakes with time zones, I need to handle this comparison in UTC.
My code looks like this:
const date1String = "7/15/2017 15:00"; // I get this from backend API. To keep it simple, I showed it as a declaration.
const date1 = new Date(date1String).toISOString();
const dateToTest = new Date(2017, 7, 21, 10, 0).toISOString();
if(date1 < dateToTest) {
// Some logic here
}
The date1String is a value I receive from my backend API which comes in string format but is always in UTC so I'm trying to convert it to a JavaScript date while keeping it in UTC. The dateToTest is a date value I generate within a for loop.
I'm getting an invalid time value error where my date comparison is.
How do I handle this date comparison?
UPDATE:
Here's a screen shot of actual code where disabledDates["disableBefore"] is the value I'm getting from the API.
I have a data array which has a date attribute, I need to filter the data based on date.
I am using dstorejs to store the data as below
this.employeeStore = new Memory({data:[emplist],idProperty:"emp_num"});
I need to make a filter based on employee's joining date , like who joined from 1st of Jan 2014 till 3rd of March 2015
this.employeeStore.filter({joinDate:'01/01/2014'});
This gives all employees who joined on 1st of Jan 2014 but if I need to filter in a range like
this.employeeStore.filter.gte({joinDate:'01/01/2014'});
This will not work because it is not a number, it is a string or date object
To achieve this do I need to write the custom store as they mentioned in tutorial?
Is there any other way of doing this?
Or is there any other framework like dstore to achieve this ?
You can achieve this just by using dojo/store Query filter ,
exactly query with callback function to manage comparing date
and also using the dojo/date compare function to compare date of your emplist array to a specific date like below :
this.employeeStore = new Memory({data: someData});
var compareDate = new Date(2014,1,1);
var results = store.query(function(object){
// compare return -1 if lower
// return 0 if equals
// return 1 if greater
return date.compare(object.date, compareDate) > -1;
});
results.forEach(function(yourResultData){
// some stuff looping results
});
you can see a Fiddle to have a better understanding .
I have this code that draws a d3js multichart object, the value time:Years values are given in this format Year=2011...
with this time format the code works fine but once I wanted to change the data time in this format Year=(Y-M-D H:M:S)
var data = [{"Year":"2011-10-01 20:46:04","Happy":"63.4","Sad":"42.7","Angry":"12.2","Surprised":"44.2"},
{"Year":"2012-10-01 17:02:04","Happy":"75.4","Sad":"32.7","Angry":"78.2","Surprised":"82.2"},
{"Year":"2013-10-01 19:55:44","Happy":"73.4","Sad":"20.7","Angry":"92.2","Surprised":"75.4"}];
I parsed the data Year:
var parseDate=d3.time.format("%Y-%m-%d %H:%M:%S").parse; //line 13
d.Year=parseDate(d.Year); //and then line 53
But it is not working, how can I read data Year in this format:(Y-M-D H:M:S)
The problem in your example is that you're converting all properties of the objects to numbers. This works if the date is just the year, but not if it is a string that needs to be parsed. In your case, you don't need to do this conversion anyway because you can give the numbers as numbers rather than strings directly. That is, you don't need
for(var prop in d) {
if(d.hasOwnProperty(prop)) {
d[prop] = parseFloat(d[prop]);
}
}
Working jsfiddle with the conversion code removed here.
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