search

google / google-visualization-issues

288 stars 35 forks source link

LineChart gridlines are not always aligned #2929

Open maurocap opened 3 years ago

maurocap commented 3 years ago

Hello, I think I've found a bug on LineCharts. When the data rows contains a Date created from an american date string format (MM/dd/yyyy) then the points plotted on the chart and the gridlines are aligned. If the same Date is created from and ISO 8601 date string format or from an epoch number then the point are a bit to the right of the gridlines, even if the dates are the same.

I think it's an issue caused somehow by the timezone of the browser hosting the page.

I've created a simple html page showing the bug. It's attached to this issue.

This is how the charts look like on my pc (time zone Berlin/Rome - FFox Dev / Chrome / Edge): image test.zip

I hope this issue can be useful. Bye, Mauro

etabackman commented 2 years ago

I don't think it is a bug. You need to consider the offset between the date and your local browser time. Google Charts always renders according to your local time. I solved this by adding or subtracting the necessary offset from the date.

maurocap commented 2 years ago

I'm sorry, but I disagree. In my example when the chart is initialized with and american date (like 10/15/2020) there's no time zone specified at all but the resulting point is perfectly aligned to the gridline even if I display the page on a browser with a local time different than London +0. Perhaps the bug is relative to how the american date are handled, I don't know, but in my opinion there's a not clear behaviour in date convertion and points placements: on the same browser with the same local time different than London +0 data.addRows([[new Date('10/15/2020'), 5],.. produces different graphic alignement than the equivalent data.addRows([[new Date('2020-10-15'), 5],.. and it should not. Both are dates without timezone, but only one is correctly managed

etabackman commented 2 years ago

I see. You are saying the problem is in the parsing of the date, not in the display. My understanding is that the display is correct because it sees your dates as being offset by the timezone offset of your browser.

Perhaps it parses American dates as a local date (so it is always aligned to the local browser time) and it parses other dates as UTC.

You can verify this by changing your computer time temporarily to a larger time offset and see if the visual offset on the chart increases.

According to the documentation at https://developers.google.com/chart/interactive/docs/datesandtimes?hl=en#dates-using-the-date-constructor :

"Warning: The string representation in the Date constructor may be parsed differently by different browsers and different versions of browsers, thus returning different dates for the same string. As such, it is not recommended to pass in strings to the Date constructor. Instead, it is encouraged to only use numbers for the Date constructor's arguments."

It appears that if you pass a string, it uses the browser's Date.parse() which can vary between browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

maurocap commented 2 years ago

I understand. As you said the argument passed to the new Date() creates different dates on the same browser. For instance on my time zone (GMT+0200):

Dates management in a browser will always be somehow confusing and sooner or later the timezone mosquito will bite you. :) I think this behaviour is not a google charts bug. Thank you for your time and you answer.