CODEWITHSUNDEEP
vega-lite
Peter Krauss
Peter Krauss

Reputation: 13930

How to set locale to show time with my language?

I have standard timestamps in a time series, so I need X-axis showing time in my language (suppose pt not en) and standards of my country (suppose European or Brazilian but not US)... There are no example showing how to use it? Suppose the example bellow, how to add correct locale in it?

{
  "data": {
    "values": [
      {"a": "1995-10-11 09:00:00", "b": 28},
      {"a": "1995-10-12 09:00:00", "b": 30},
      {"a": "1995-10-13 15:00:00", "b": 34}
      {"a": "1995-12-17 03:00:00", "b": 29},
      {"a": "1995-12-17 09:00:00", "b": 31},
      {"a": "1995-12-17 15:00:00", "b": 30}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": { field": "a", "type": "temporal" },
    "y": {"field": "b", "type": "quantitative"}
  }
}

Upvotes: 1

Views: 724

Answers (1)

jakevdp
jakevdp

Reputation: 86330

You can set the timeFormatLocale embed option to one of the locale JSON objects from d3-format-locale.

Here is an example using the pt-BR locale setting:

<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    var spec = {
      "data": {
        "values": [
          {"a": "1995-10-11 09:00:00", "b": 28},
          {"a": "1995-10-12 09:00:00", "b": 30},
          {"a": "1995-10-13 15:00:00", "b": 34},
          {"a": "1995-12-17 03:00:00", "b": 29},
          {"a": "1995-12-17 09:00:00", "b": 31},
          {"a": "1995-12-17 15:00:00", "b": 30}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "temporal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    };
    var embedOpt = {
      "mode": "vega-lite",
      "timeFormatLocale": {
        "dateTime": "%A, %e de %B de %Y. %X",
        "date": "%d/%m/%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
        "shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
        "months": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        "shortMonths": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]
      }
    };
    vegaEmbed("#vis", spec, embedOpt);
  </script>
</body>
</html>

The rendered chart looks like this:

enter image description here

Upvotes: 1

Related Questions