add support for google gantt chart

[blablablerg]

see: https://developers.google.com/chart/interactive/docs/gallery/ganttchart

its still in beta tho.

[gambleben]

Would really like to see support for Gantt charts added to the package.

[Markus Gesmann]

Try and test the version of googleVis on GitHub. I added a new function called gvisGantt.

[gambleben]

Thanks! It works really well. I just have one more request: can you modify the new function to support datetime or POSIXct? I have a project that has multiple events on the same date spanning just a few hours.

One tricky aspect is that the Google Gantt will only accept Date as the datatype, but the Date() constructor still accepts times and the chart will render correctly as long as the overall timespan isn't too great.

Here's a modification of the example from their documentation using different times on the same day, instead of different days:

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

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}

function drawChart() {

  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,6,0,0), new Date(2015, 0, 1,8,0,), null,  100,  null],
    ['Write', 'Write paper',
     null, new Date(2015, 0, 1,20,30,0), daysToMilliseconds(.1), 25, 'Research,Outline'],
    ['Cite', 'Create bibliography',
     null, new Date(2015, 0, 1,13,30,0), daysToMilliseconds(.05), 20, 'Research'],
    ['Complete', 'Hand in paper',
     null, new Date(2015, 0, 1,22,30), daysToMilliseconds(.05), 0, 'Cite,Write'],
    ['Outline', 'Outline paper',
     null, new Date(2015, 0, 1,13,30), daysToMilliseconds(.1), 100, 'Research']
  ]);

  var options = {
    height: 275
  };

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

  chart.draw(data, options);
}`

Thanks again!

[Markus Gesmann]

I have added 'datetime'. Please try again with the GitHub version of googleVis. Perhaps, you can contribute a minimal 'datetime' example?

[gambleben]

Here is an slightly modified version of your example:

`daysToMilliseconds <- function(days){
days * 24 * 60 * 60 * 1000
}

dat <- data.frame(
taskID = c("Research", "Write", "Cite", "Complete", "Outline"),
taskName = c("Find sources", "Write Paper", "Create bibliography",
"Hand in paper", "Outline paper"),
resource = c(NA, "write", "write", "complete", "write"),
start = c(as.POSIXct("2015-01-01 6:00:00"), NA, NA, NA, NA),
end = as.POSIXct(c("2015-01-01 8:00:00", "2015-01-01 20:30:00", "2015-01-01 13:30:00",
"2015-01-01 22:30:00", "2015-01-01 13:30:00")),
duration = c(NA, daysToMilliseconds(c(.1, .05, .05, .1))),
percentComplete = c(100, 25, 20, 0, 100),
dependencies = c(NA, "Research, Outline", "Research",
"Cite, Write", "Research")
)
t <- as_datetime("2015-01-01 6:00:00")
gntt1 <- gvisGantt(dat, taskID = "taskID",
taskName = "taskName",
resource = "resource",
start = "start",
end = "end",
duration = "duration",
percentComplete = "percentComplete",
dependencies = "dependencies",
options = list(
height = 275))
plot(gntt1)`

If you look at the code it generates, it still only includes the date components, but not the times when it creates the JSON. For example:

var datajson = [ [ "Research", "Find sources", null, new Date(2015,0,1), new Date(2015,0,1), null, 100, null ],

[Markus Gesmann]

Not sure, how this work. Your code generates the following output:

The Google documentation seems to suggest that only date formats are allowed for the start and end date, while the duration is given in milliseconds. So, perhaps you have to set the duration appropriately and drop the start and end dates?

[Markus Gesmann]

Allowing for 'datetime' throws an error from the Google Chart API

[gambleben]

I've simplified the example a bit to make it easier to follow. Below is the R code:

daysToMilliseconds <- function(days){
days * 24 * 60 * 60 * 1000
}

dat <- data.frame(
taskID = c("Research", "Write", "Complete"),
taskName = c("Find sources", "Write Paper", "Hand in paper"),
resource = c(NA, "write", "complete"),
start = c(as.POSIXct("2015-01-01 6:00:00"), NA, NA),
end = as.POSIXct(c("2015-01-01 8:00:00", "2015-01-01 13:30:00", "2015-01-01 20:30:00")),
duration = c(NA, daysToMilliseconds(c(.1, .05))),
percentComplete = c(100, 25, 0),
dependencies = c(NA, "Research",
"Write")
)

gntt1 <- gvisGantt(dat, taskID = "taskID",
taskName = "taskName",
resource = "resource",
start = "start",
end = "end",
duration = "duration",
percentComplete = "percentComplete",
dependencies = "dependencies",
options = list(
height = 275))
plot(gntt1)

When your package generates the code to populate var datajson, it only includes the year, month, and day for the date columns.

var datajson =
[
[
"Research",
"Find sources",
null,
new Date(2015,0,1),
new Date(2015,0,1),
null,
100,
null
],

The desired behavior is for it to include the hour, minute, and second values so the output would become

var datajson =
[
[
"Research",
"Find sources",
null,
new Date(2015,0,1,6,0,0),
new Date(2015,0,1,8,0,0),
null,
100,
null
],

Attached is the html output from the R code above, and a fixed version that I manually modified to add the hour, minute, and second components.

googlevisgantt.txt
googlevisganttfixed.txt

[Markus Gesmann]

I see now a date can have hours and minutes too. I added a step where 'datetime' variables are replaced as 'date' variables. Now I get the following output:

[gambleben]

Works like a charm! Thanks so much for your incredibly quick response on this one!