Localize time_format in graphs

[Alarmfifa]

Hello dear developers team.
Thank you for a awesome product, but I have one problem.

Now there is a hadcoded US date format in time_format function.
The most annoying case is display month and day. When I see something like "2/3" I'm a bit confused. Is it "the second of Mart" or "the third of February"?
The most sad thing, that I can't to configure this behaviour.

Unfortunately the simplest way (and may be the most proper) doesn't help here. I mean toLocaleString with additional options. You can return different array of options instead of hardcoded format pattern and this method convert date in accordance with a right locale.
But in our case there is a jquery plot and it requires date format for converting timestamp by itself.

So, the second way is make some kind of mapping locale -> format array. Example. It seems a bit ugly. But it could be a single working solution.

May be I missed some obvious and better solutions. That's why I didn't create a pull request. =)

[torkelo]

yes, better options for this should be added. Not sure what the best way is, think there even might be a PR for this that was submitted a long time ago which I have not had time to review yet.

[Alarmfifa]

Cool, thanks!
Now, I rebuilt grafana with hardcoded european format in my project =)

[toubib]

This would be useful as European date format is not in the same order (day/month/year) dates are actually confusing

[ITDebicki]

+1

[Alexander882]

+1

[abligh]

+1

[RyanCarrier]

For anyone else that wants to fix this;
I use this for my solaris build.

Tries public_gen incase grunt has already been run.

#!/bin/bash
set -e

patch(){
   echo -e "Attempting to patch into;\n$GRAPHJSFOLDER"
   ORIG=$GRAPHJSFOLDER/graph.js
   BACKUP=$GRAPHJSFOLDER/graph.js.backup
   cp $ORIG $BACKUP
   sed 's/%m\/%d/%d\/%m/g' $BACKUP > $ORIG
}

GRAFANAROOT=$GOPATH/src/github.com/grafana/grafana

GRAPHJSFOLDER=$GRAFANAROOT/public/app/panels/graph
patch
GRAPHJSFOLDER=$GRAFANAROOT/public_gen/app/panels/graph
patch

[toni-moreno]

+1

[royemmerich]

+1

[zachd]

+1 on this, forcing US locale MM/dd in graphs isn't ideal. Possibly helped by the locales introduced with #5517?

[maykSVK]

+1

[tokudan]

+1, this is currently blocking adaption in our company

[RyanCarrier]

@tokudan Hey, this is what we did in our solution; #1459 (comment)

[wwentland]

It would be wonderful if this could take the actual browser localisation into account or if users could at least configure it manually. Forcing everyone to use US style dates is really quite suboptimal.

[gianluca-sabena]

+1

[sikr]

+1

It would be great when the date could be generally customized. Example:
Instead of having
2016-11-21 21:19:00
I'd like to see the weekday as well as a short date (german format here):
Mo, 21.11., 21:19

[hraftery]

@RyanCarrier any idea how to make this modification without building from source? I found the equivalent file in my Ubuntu installation (from deb package) here:

/usr/share/grafana/public/app/plugins/panel/graph/graph.ts

Alas, modifying that file, restarting grafana-server and refreshing the browser does not pick up the change. I spotted this minified version:

/usr/share/grafana/public/app/plugins/panel/graph/graph.js

and thought I was on to a winner, but alas, same result. Do you know if there's another compilation output that grafana uses that would explain why modifying these files doesn't make a difference?

[RyanCarrier]

Hey dude if the script I wrote previously doesn't work and you're stilling having trouble, respond back and I'll have a look when I have some time back home (Probably the 2nd or 3rd).

#1459 (comment)

[RyanCarrier]

Oh sorry I didn't realise from deb package. I'll have to have a look at home and have a go on my server. Bump me if I don't respond by the 3rd. :)

[hraftery]

Bumping @RyanCarrier - haven't been to figure this one out. Suspect it's something simple, but I can't get Grafana to pick up any changes I make to graph.ts (without compiling from source, which I'd prefer to avoid if possible).

[RyanCarrier]

they have changed stuffa round since I last played, and I don't have a environment like I did back then. But I've found %m/%d in a few files; to keep you updated.

public/app/app_bundle.js:13
public/app/boot.js:18
public/app/boot.fnsdmjkfnasjk.js
the rest are in
public/app/plugins/panel/graph

graph.ts
graph.js
specs/graph_specs.js
specs/graph_specs.ts

[RyanCarrier]

Hey so the it's the weird boot.123456.js in /usr/share/grafana/public/app.

Just to be safe I would change it in boot.js too, I assume it gets built when you install it?

just run that sed command I made just remember your numbers will be different but;

cp boot.123456.js boot.123456.backup.js
sed 's/%m\/%d/%d\/%m/g' boot.123456.backup.js > boot.123456.js 

then just refresh the page (ctrl shift r) probs works with regular refresh. But whatever.

Sorrry it took me so long I completely forgot.

the command just replaces all %m/%d with %d/%m

[RyanCarrier]

I would also run it on the other files also, for incase they are joined together during recompile or update or something.

[hraftery]

That did it! Regular refresh was enough. The other files you mention are also present and contain the string.

Bit mysterious. Suspect that's going to be useful knowledge for other issues that crop up. Thanks a lot!

[leinad13]

Is there a way of changing the date format through the Grafana GUI or settings? I can see some chatter about making changes to source files, which i'd rather not do :)

[davkal]

I am one of the product owners and listed my email and the public slack as ways to get in touch. Nobody has contacted me.

Our invitation to contribute is still open. The steps are laid out above. We're maturing as an engineering org, so for this endeavour the party who'd like to work on this should start a design doc. See this one for an example.

[andig]

I am one of the product owners and listed my email and the public slack as ways to get in touch. Nobody has contacted me.

@davkal I don't know how to react but what you're writing makes me sad:

• I've personally tried to highlight the importance of this request Localize time_format in graphs #1459 (comment)
• tried to forward specification Localize time_format in graphs #1459 (comment)
• I've tried- albeit with limited skill- to take up pushing an abandoned PR further ([wip] Rebase #13429 #18659) and asked for help [wip] Rebase #13429 #18659 (comment)
• been told that should be abandoned:

  Not going forward with this, see also [WIP] Graph time format browser-localized with user preference override #13429

• been told in [WIP] Graph time format browser-localized with user preference override #13429 that:

  Not going forward with this, will retry with more comprehensive approach.

And how you're saying:

Nobody has contacted me.

I'll not say more but don't feel appreciated right now.

[davkal]

Your effort was certainly appreciated @andig and you tried to advance the issue. My point is, there was no other discussion apart from ours (the one above in Sep 2019).

To clarify again: localization of graph formats makes a ton of sense, and it's on the roadmap. Perhaps we can even get to it this summer, but don't rely on us for that, roadmaps can change. If this feature will bring value to you, then feel free to contribute and make it happen sooner.

[tparvais]

Hope it will be there soon, grafana lacks some basic features like this one (format date with user settings...)

[robo-corg]

It looks like stackdriver timeRange url query params expect ISO 8601 formatted times and not unix timestamps. Having ISO formatted time for this would unlock linking to stackdriver from panels (with the current time). Thanks for all the hardwork!

[Appelg]

Can anyone provide a SED/patch solution for Grafana 7? (m/d) -> (d/m)

[alex-shpak]

Little PR to make things better. #25602.
Suggests to use local browser format for graph panel.

[liampetti]

Looks like an option is coming soon, but for those who are looking for a quick fix:

for i in /usr/share/grafana/public/build/*.js; do sudo sed -i 's@MM/DD@DD/MM@g' "$i"; done

Works on Grafana v7

[Kazmirchuk]

+1, can't believe such a trivial thing has been in discussion for 5+ years
do enterprise users of Grafana suffer from the same issue as well?

[jpVm5jYYRE1VIKL]

Ha ha. 5 years passed. It is shame.

[hlovdal]

Please prioritize getting this fixed. Graphs with mm/dd formatting are so useless.

I do not care about the perfect solution of letting each users be able to chose an individual formatting, a single system setting for date formatting is ok as long as I am able to avoid exposure to this horrible date formatting abnormality.

[torkelo]

System date formatting options just got merged #27216

Adds these ini settings

[date_formats]
# For information on what formatting patterns that are supported https://momentjs.com/docs/#/displaying/

# Default system date format used in time range picker and other places where full time is displayed
full_date = YYYY-MM-DD HH:mm:ss

# Used by graph and other places where we only show small intervals
interval_second = HH:mm:ss
interval_minute = HH:mm
interval_hour = MM/DD HH:mm
interval_day = MM/DD
interval_month = YYYY-MM
interval_year = YYYY

# Experimental feature
use_browser_locale = false

Please test and give feedback. Plan to add org level settings for this as well in a future release. The use_browser_locale still has some kinks to fix (detect 12 vs 24 hour time). A first_day_of_week option could also be a good addition to add to this.

[andig]

Thanks @torkelo much appreciated!

[torkelo]

Here is an example

Config:

[date_formats]
# Default date format
full_date = MMM Do, YYYY @ hh:mm:ss a
# Used by graph and other places where we only show small intervals
interval_second = hh:mm:ss a
interval_minute = hh:mm a
interval_hour = MMM DD hh:mm a
interval_day = MMM DD
interval_month = YYYY-MM
interval_year = YYYY

[andreasloe]

That is wonderful news, thank you very much! I restarted grafana but the new format did not show up. Which version should I install - can you point me to a site explaining this?

[torkelo]

Nightly build or wait for 7.2 beta (very soon)

[Appelg]

Nightly build or wait for 7.2 beta (very soon)

How often is the master tag at dockerhub updated? It's two days old, would it be possible to trigger it more often?

[jessereynolds]

Nice one @torkelo - the following is working nicely on the grafana:7.3.5 docker image (docker-compose.yml excerpt):

version: '2.0'
services:
  grafana:
    image: grafana/grafana:7.3.5
    environment:
      - GF_DATE_FORMATS_INTERVAL_HOUR=DD/MM HH:mm
      - GF_DATE_FORMATS_INTERVAL_DAY=DD/MM

However, setting GF_DATE_FORMATS_USE_BROWSER_LOCALE=true did not work for me here in Australia, using Firefox on a mac - the short date formats remained in the US-specific MM/DD format.

[taufikp]

Hey all,

Thank you for the global system-wide date formatting. However I found that it is really not useful for my use case.

As you can see, I need to show the date time column as week number, month, and year, plus custom text. Even if system wide option formatting can do this, it will be applied to all charts am I right?

Because of this, I am now stuck with Grafana 6.7.1 because this version allows me to format/custom my date in a table chart quite freely.