CODEWITHSUNDEEP
javascriptgoogle-visualizationtimeline
obab
obab

Reputation: 75

Change Google-Visualization Timeline Date/Time-Format

I have a problem formatting the horizontal axis in my google timeline chart. The problem is that I have different data sets where the time range can be days or hours or maybe minutes. The timeline chart formats its hAxis on its own but it uses american date format. I want to have the ISO date format (e.g. 22/07/2015) and time like hh:mm. I saw an formating example for the google corechart on the docs: https://developers.google.com/chart/interactive/docs/datesandtimes (last one on page)

I tried to apply it to my problem:

https://jsfiddle.net/ezcxd61m/2/

var options = {
        width: 900,
        height: 500,
        legend: {position: 'none'},
        enableInteractivity: false,
        chartArea: {
          width: '85%'
        },
        hAxis: {
          viewWindow: {
            min: new Date(2013, 9, 13),
            max: new Date(2015, 0, 3, 1)
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['dd.MM.yyyy']},
              hours: {format: ['HH:mm', 'hh']},
              minutes: {format: ['HH:mm', ':mm']}
            }
          },
          minorGridlines: {
            units: {
              days: {format: ['dd.MM.yyyy']},
              hours: {format: ['hh:mm:ss', 'hh']},
              minutes: {format: ['HH:mm', ':mm']}
            }
          }
        }
      };

But it seems that it doesn't work for the timeline chart. Can anyone help me?

Thanks, Rob

Upvotes: 2

Views: 6341

Answers (2)

WillCo
WillCo

Reputation: 41

You will need to set the hAxis.format() depending on the thresholds you set.

If this threshold is minutes, set the hAxis one way. If this threshold is hours, set it another, and if its days, or weeks, or months or years set it a different way.

Just check the threshold condition before writing the chart, and apply it to the options object.

Upvotes: 0

Federico
Federico

Reputation: 296

I had a similar issue, starting from your first attempt I guess I managed to get what you were asking for. Just change the hAxis in the options var as follows:

hAxis: {
   format: 'dd.MM.yyyy HH:MM'
}

I've applied the changes in the url you provided https://jsfiddle.net/ezcxd61m/2/

Upvotes: 3

Related Questions