Google Timeline Chart date box

aaaaaaaahhhhhh · 02-11-2014 01:37PM #1

Hey Guys
This may be very simple to resolve or very complicated.

I have the below code for a Google timeline graph.
When I hover over a bar in the graph, the date in the pop up box only shows the Month and year i.e. Jan 2014.

I need this to show the full date i.e 23 Jan 2014.
Does anyone know how i make this change?

See image for hover box that I refer to.
https://drive.google.com/file/d/0B6t6For7n9V5QnZCbTVybi1GMk0/view?usp=sharing

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1.1', {'packages':['annotationchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true,
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 500px;'></div>
  </body>
</html>

NoelOC · 03-11-2014 10:31AM

You need to add a Date Format to the options:

Something like this
var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
formatter_medium.format(data,1);

You can find more info here:
developers.google.com/chart/interactive/docs/reference#formatters

Google Timeline Chart date box

Comments