I have a Highchart that I cannot seem to fix. The dates on the xAxis are correct but the dates on the labels are off by one day. No matter what data I pass to my chart it is always off by one day. I have been pulling my hair out trying to figure this out. Any tips would be appreciated.
You can see my code here:
http://jsfiddle.net/brenjt/zxBTG/2/
Just found your question... I think the solution to your problem is to set up the UTC timezone option to false. This will set up the chart timezone to be local and not UTC.
Highcharts.setOptions({
global : {
useUTC : false
}
});
See: http://api.highcharts.com/highcharts#global.useUTC
Well, I added time info to the axis and tooltip see http://jsfiddle.net/gATfu/
It looks like your timestamps are from 10pm but the axis labels are showing 0am ... thats why the points look about one day shifted.
it's because of the timezone. You should convert you date in UTC format with Date.UTC(..). It will work
The global HighCharts option for UTC worked quite good. I cannot yet vote that one up :(
I also figured out that HighCharts moves my bar chart according to the exact time stamp as described by dgw. I.e. a date from the 1st of May can be shown in the near of 30th of April depending on the scaling. That confused me because there were two 30th of April entries and no 1st of May.
Related
I do let fullcalendar initialize normally. So it represents current date. (Midnight->midnight, 1day, 1h slots)
From some other datasource I get data with timestamps. The format is "YYYY-MM-DD HH:mm" (transmitted as a string, no timezone information)
So I convert that string to a moment object and test against fullcalendar.start and .end to see if it is within.
moment("2016-04-07 00:00") == $('#calendar').fullCalendar('getView').end
This results in false though the following command
$('#calendar').fullCalendar('getView').end.format("YYYY-MM-DD HH:mm")
returns
"2016-04-07 00:00"
I also tried to compare with diff
moment("2016-04-07 00:00").diff( $('#calendar').fullCalendar('getView').end,"minutes")
which returns
120
Some research on the calendars.end object in Chrome Dev Tools revealed that it internally is represented as
2016-04-07 02:00 GMT+0200
This looks strange to me. I am in timezone 2h ahead of GMT. So it should correctly say 2016-04-07 00:00 GMT+0200, should it not?
This also explains why the diff test above resulted in 120 minutes.
Can someone help? I do not get where the conversion problem comes from. I am using only dates with no timezone information. And as said above, fullcalendar initalizes with no gotodate information and shows a time bar from 00:00 to 00:00. So why does it come that there is this 2h difference?
Thanks a lot. I do understand things a lot better now.
Some of the dates I tried to compare were 'now'. I got 'now' by
var n = moment()
That turned out to be a date time including my timezone.
E.g. moment().format() resulted in '2016-04-07 00:00 GMT+0200' and I now see how this went wrong excepting a comparison against full calendar.end to be true but it was false as '2016-04-07 00:00 GMT+0200' is '2016-04-06 22:00' at UTC.
As
moment.utc()
does not work, I know ended up with using
moment.utc(moment().format('YYYY-MM-DD HH:mm'))
This now seems to work as this treats my local time as it would be the 'numerical same time' at UTC.. thus matching with how fullcalendar handles times internally (ambiguously-zones moments).
Thanks
A few things:
The timezone parameter controls how FullCalendar works with time zones.
By default, FullCalendar uses "ambiguously-zoned moments". These are customizations to moment.js made within fullCalendar. The docs state:
The moment object has also been extended to represent a date with no specified timezone. Under the hood, these moments are represented in UTC-mode.
Thus, to compare dates in this mode, treat them as if they were in UTC.
moment.utc("2016-04-07 00:00")
To compare moments, use the moment query functions, isSame, isBefore, isAfter, isSameOrBefore, isSameOrAfter, and isBetween.
In this case, since FullCalendar's start is inclusive but the end date is exclusive, you probably want to compare like this:
var cal = $('#calendar').fullCalendar('getView');
var start = cal.start;
var end = cal.end;
var m = moment.utc("2016-04-07 00:00"); // your input
var between = m.isSameOrAfter(start) && m.isBefore(end);
Note that there's an pending enhancement to moment's isBetween functionality for a future release that will give you control of exclusivity, but currently isBetween is fully inclusive, so you have to use the combination of functions shown here.
I have a Highstock StockChart which uses Persian(Jalali) dates.
I am using dataGrouping on days and months. Although dataGrouping is fine on days, months grouping is not working. Its because of the difference between Jalali and Christian months.
For example 1st of January begins on 10th of month دی of Jalali months. So when I have data from 1st of دی to 30th of دی (the whole month), I want Highcharts to show only one column for دی but instead it shows two columns. One for آذر (a month before دی) and one for دی. It's because it sees December before January (because of the 10 day difference).
Here's a sample : http://jsfiddle.net/SQwGT/9/
Its not a good example specially when most of you don't know Persian language, but it somehow demonstrates the issue.
How can I fix it? Is there a way I can tell Highcharts how to manage its months? Is there any other way around?
I wrote a PersianDate class and implemented every single method in the class Date more importantly set/get UTC Date/Month/... methods. And I used:
Highcharts.setOptions({
global: {
Date: PersianDate
}
});
to change the Date class the Highchart uses. After that the chart knew which month started and ended in which days from the UTC Date format and the dataGrouping worked fine with Jalali months.
You can overwrite default approximation, and prepare your own.
There is the following code:
console.log(order.start_time);
console.log(moment(order.start_time).format("HH:MM"));
I just want to get hour and minute from date using moment and display it. Output:
2014-06-30T09:00:00.000Z
13:06
But I don't understand why my date is formatted incorrectly. Thanks in advance.
Please note that there is a difference between MM and mm. The first formatting option is used for months, while the second is for days.
More information here: http://momentjs.com/docs/#/parsing/string-format/
From the doc here:
http://momentjs.com/docs/#/displaying/format/
You should use HH:mm. Then your time will have right format.
Further information, the time might be incorrectly as you expected because timezone. Momentjs auto display time in your system timezone.
Update:
To display time in specified Timezone, use "zone" method:
console.log(moment(order.start_time).zone('+00').format("HH:mm"));
I am trying to show a graph with dygraph with a TWO_DAYS granularity but I'm not able to find the way of declaring it.
Any ideas??
Thank you very much!
You are looking for the dateWindow parameter I think.
dateWindow
Initially zoom in on a section of the graph. Is of the form [earliest,
latest], where earliest/latest are milliseconds since epoch. If the
data for the x-axis is numeric, the values in dateWindow must also be
numbers.
Type: Array of two Dates or numbers
Default: Full range of the input is shown
I have a HighChart chart which contains a series which is made up of date/value pairs. Each date in the pairs is different. When there are data pairs which have dates which are not within the same week they dates are displayed as they should (mm/dd/yyyy) but when the data set contains only a view pairs which are all within the same week or days right next to each other instead of displaying dates in the (mm/dd/yyyy) format the chart switches to what looks like a time display and shows 00:00, 08:00, 16:00 instead of the full dates.
I already scoured the HighCharts forum and cannot find nor get an answer to this strange behaviour. Maybe someone here can help.
You can see the chart at http://jsfiddle.net/schleichermann/DkgVr/
This is a foible of the auto-scaling algorithm.
Basically, it starts with the smallest unit and stops looking too soon in some cases (like yours)1.
If you know, in advance, the timescale of interest, you can tweak the xAxis settings to compensate.
In this case adding:
day: '%b %e',
hour: '%b %e',
May be adequate. See: jsfiddle.net/DkgVr/4/ .
Or setting tickInterval: 24 * 3600 * 1000 (one day) might be good enough.
See: jsfiddle.net/DkgVr/5/ .
1 It should probably work largest to smallest. Consider making a feature-request or bug report.