How do I show full dates in Google Gantt Charts?

Question

I am using Google Gantt Charts to visualize a schedule of classes. On hover, I currently see "name: month yyyy - month yyyy." My goal is to also see the specific date of the month, so that it would look like "name: month dd yyyy - month yyyy" or "dd mm yyyy - dd mm yyyy".

I have class data stored in a MySQL table, which I am adding to the chart data table with an ajax request.

Here is the visualization

Here is my table

Here is my javascript code:

function drawChart() {

  var calendarTable = new google.visualization.DataTable();
  calendarTable.addColumn('string', 'Task ID');
  calendarTable.addColumn('string', 'Task Name');
  calendarTable.addColumn('string', 'Resource');
  calendarTable.addColumn('date', 'Start Date');
  calendarTable.addColumn('date', 'End Date');
  calendarTable.addColumn('number', 'Duration');
  calendarTable.addColumn('number', 'Percent Complete');
  calendarTable.addColumn('string', 'Dependencies');

  var options = {
    height: 800,
    gantt: {
      trackHeight: 30,
      sortTasks: true,
      percentEnabled: true
    }
  };

  var currentUrl = window.location.href;
  var queryString;
  if (currentUrl.includes("SAT")) {
    queryString = "/calendars.json?campus=sat";
  } else if (currentUrl.includes("DAL")) {
    queryString = "/calendars.json?campus=dal";
  } else if (currentUrl.includes("HOU")) {
    queryString = "/calendars.json?campus=hou";
  } else if (currentUrl.includes("java")) {
    queryString = "/calendars.json?programType=full-stack+web+dev+-+java";
  } else if (currentUrl.includes("science")) {
    queryString = "/calendars.json?programType=data+science";
  } else {
    queryString = "/calendars.json";
  }

  console.log(queryString);

  $.ajax({
    url: queryString,
    dataType: "JSON",
  }).done(function(data) {

    var calendarArray = [];
    //                console.log(data);
    data.forEach(function(acalendar) {
      var calendarItem = [acalendar.id.toString(), acalendar.name, acalendar.campus + ' ' + acalendar.programType, new Date(acalendar.startDate), new Date(acalendar.gradDate), null, null, null];
      calendarArray.push(calendarItem);
    });
    calendarTable.addRows(calendarArray);
    var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
    chart.draw(calendarTable, options);
    console.log(calendarArray);

  });
}
google.charts.load('current', {
  'packages': ['gantt']
});
google.charts.setOnLoadCallback(drawChart);

Thanks for the help!

How do I show full dates in Google Gantt Charts?

0 Answers