CODEWITHSUNDEEP
javascriptgoogle-visualization
Zusee Weekin
Zusee Weekin

Reputation: 1358

Change google visualization table date format

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.

Upvotes: 0

Views: 2645

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 1

Related Questions