Vaadin Charts - time zone question

Hello all,

I am looking for a function or configuration option which would force the chart to draw using a specific time zone; more specifically, I would like to disable the transformation of charted datetime to browser’s time zone.



I have done some testing and it seems I have found the solution; it is either one of the following two lines, or both:

Calendar c = Calendar.getInstance(TimeZone.getTimeZone("GMT"));
DataSeriesItem item = new DataSeriesItem(c.getTimeInMillis(), value);

The above two lines do the trick. So, once again, if you need to show server’s date, time, or time stamp, use the above two lines when generating the vaadin chart.

I am not sure I understand what the above is doing and how it solves the issue. The method you are using “getTimeInMillis()” has this in the API:

the current time as UTC milliseconds from the epoch.

So woudln’t that show the date in UTC? I am getting date values from a database that are in UTC and I am converting them to a timezone that is selected by the user. Then I pass the value to the data series as a object. This is not working though because does not have a timezone.

Is there a way to configure the chart to display the date values in a timezone?


I figured out a way around this. Basically, the chart will always display the data in UTC. So my solution is to determine the offset in milliseconds between UTC and the timezone I want to display and then add this difference to the UTC date. I am doing all of this with joda datetime and datetimezone objects, which made it very easy.

Here is what I am doing.

//creating a datetime object from my object in UTC
DateTime xValue = new DateTime(dataPoint.getXValue())
//create a timezone object for the selected timezone from the UI
DateTimeZone timeZone = DateTimeZone.forID(selectedTimeZone);
//set the timezone of the datetime object to the selected timezone and pass this to getOffset
int offset = timeZone.getOffset(xValue.withZone(timeZone));
//pass in our datetime object plus the milliseconds of our offset
dItem = new DataSeriesItem(xValue.plusMillis(offset).toDate(), dataPoint.getYValue());

I hope this can help someone else.

Thanks Devin
I’ve been looking into this issue as well, while your method fixes my problem I’m not sure about your assumption that the Charts always render with UTC. From my experiments it seems that this depends on the DataSeriesItem constructor -

When using new DataSeriesItem(cal.getTime(), someNum); //passing a Date Object The chart seems to always render in the same Timezone as the server.
While when using:

new DataSeriesItem(cal.getTimeInMillis(), someNum); //passing time in Unix Millis

The chart seems to render the Timezone as UTC . This discrepancy is also why Aleksanders fix also works.

Could someone from Vaadin maybe clarify this point? It would be realy great if we could simply pass Timezone aware Objects for any timezone instead of having to work around this.


HighCharts (the engine on which Vaadin Charts is based) does have support for time zone savvy features.

As a crude workaround, Vaadin Charts 2 includes the
Util class
with a couple static methods to make the milliseconds adjustment.