0

How to change the date format in google visualization table? I have data feed with 01-08-2016. But when I sort the table It's not sorting correctly. Please check the two images below. enter image description here

I used this code but not working.

var monthYearFormatter = new google.visualization.DateFormat({ 
         pattern: "dd-MM-yyy" 
    }); 
    monthYearFormatter.format(data, 0);

Any suggestion would be appreciated.

Zusee Weekin
  • 1,348
  • 2
  • 18
  • 41

1 Answers1

1

to use DateFormat, the column must be of type 'date'

if you're building the DataTable from an array,
you can provide the column type along with the label,
by using object notation
{label: 'Date', type: 'date'}

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [{label: 'Date', type: 'date'}],
      [new Date('07/07/2016')],
      [new Date('07/08/2016')],
      [new Date('07/09/2016')],
      [new Date('07/10/2016')],
      [new Date('07/11/2016')],
      [new Date('07/12/2016')],
      [new Date('07/13/2016')],
      [new Date('08/01/2016')]
    ]);

    var monthYearFormatter = new google.visualization.DateFormat({
      pattern: "dd-MM-yyy"
    });
    monthYearFormatter.format(data, 0);

    var chart = new google.visualization.Table(document.getElementById('table'));
    chart.draw(data, {
      allowHtml: true,
      sortAscending: true,
      sortColumn: 0
    });
  },
  packages: ['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • Thanks for your support. But my date format is "01-08-2016" . I used data.addColumn('date', 'Date'); and data.setCell(parseInt([i]),0,new Date((values[i]['Date']))); But dates not displaying properly. Only few dates can visible other columns display as NaN-NaN-NaN. – Zusee Weekin Aug 02 '16 at 01:08
  • I solved the issue of converting date. Your solution works for me. Thanks. – Zusee Weekin Aug 02 '16 at 01:15
  • Do you know to add a clickable icon when mouse hover the rows of google table when there is a "google.visualization.events.addListener(table, 'select', function() "? Normally it displays arrow icon which isn't giving a idea to the user that this is clickable. – Zusee Weekin Aug 02 '16 at 07:00
  • sure, do you have another question? Table charts produce a normal set of html table elements, easily modified when the `'ready'` event fires -- [here is a brief example](http://stackoverflow.com/a/38160789/5090771), which modifies the background of the header cells... – WhiteHat Aug 02 '16 at 11:28
  • Yes I have. Could you please look this one : http://stackoverflow.com/questions/38736519/wrap-each-row-by-link-google-visualization-table – Zusee Weekin Aug 03 '16 at 06:59