Date formatter doesn't work in timeline tooltips

1,016 views
Skip to first unread message

mic...@stray-hound.com

unread,
Nov 14, 2014, 12:01:12 PM11/14/14
to google-visua...@googlegroups.com
According to the release notes for the most recent release, Timeline -- Date format now available in tooltips.  

But it doesn't seem to work.

I'm specifying version 1.  Is that wrong?  If so, what should the version be?

Or am I doing something wrong in my code?


google.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById("role_history");
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Office' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([ 
   ["Sales Associate","Los Angeles", new Date(2014,10,13), new Date(2014,10,15) ],
   ["Manager","Los Angeles", new Date(2013,10,12), new Date(2014,1,1) ] 
  ]);

  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
  formatter_short.format(dataTable, 2);
  formatter_short.format(dataTable, 3);

  var options = {
    // Set the height to the number of rows (times row height) + the date label height
    height: 2 * 41 + 50},
    timeline: { singleColor: '#1E90FF' }
  }
  chart.draw(dataTable, options);
}



Sergey Grabkovsky

unread,
Nov 14, 2014, 12:21:17 PM11/14/14
to google-visua...@googlegroups.com
Hi, what you are doing is explicitly formatting the date values in your data table. What we are supporting in the new version is an option (timeline.tooltipDateFormat) where you can specify the format of your dates explicitly. Here's an example of that: http://jsfiddle.net/kmjs0dbd/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Aman Kakkar

unread,
Oct 30, 2018, 11:54:03 PM10/30/18
to Google Visualization API
Hi Sergey,
I want to display tool tip in format: "07-Jul-2018". What format should i supply in 'tooltipDateFormat' under options below:

  var options = {
    // Set the height to the number of rows (times row height) + the date label height
    height: 2 * 41 + 50,
    timeline: { singleColor: '#1E90FF',tooltipDateFormat: 'd/MM' }
  }
Reply all
Reply to author
Forward
0 new messages