CODEWITHSUNDEEP
google-visualization
Innovative Thinker
Innovative Thinker

Reputation: 1795

Sort the records based on time Gantt Chart

Do we have option to sort the records based on time in Gantt Chart using google charts api. my data are sorted internally based on some criteria. i searched in google site i didn't get any luck. please anyone help me out.

Upvotes: 2

Views: 1288

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

the data can be sorted before drawing the chart 

// sort by start and end dates
data.sort([{column: 2}, {column: 3}]);

this will affect the order in the which the rows appear on the chart (y-axis)

the chart automatically sorts by date/time on the x-axis

see following example...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task ID');
    data.addColumn('string', 'Task Name');
    data.addColumn('date', 'Start Date');
    data.addColumn('date', 'End Date');
    data.addColumn('number', 'Duration');
    data.addColumn('number', 'Percent Complete');
    data.addColumn('string', 'Dependencies');
    data.addRows([
      ['Research', 'Find sources',
       new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
      ['Write', 'Write paper',
       null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
      ['Cite', 'Create bibliography',
       null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
      ['Complete', 'Hand in paper',
       null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
      ['Outline', 'Outline paper',
       null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
    ]);

    // sort by start and end dates
    data.sort([{column: 2}, {column: 3}]);

    new google.visualization.Gantt(document.getElementById('chart_div')).draw(
      data,
      {
        height: 275
      }
    );
  },
  packages:['gantt']
});

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions