googleVis icon indicating copy to clipboard operation
googleVis copied to clipboard

add support for google gantt chart

Open blablablerg opened this issue 8 years ago • 10 comments

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

its still in beta tho.

blablablerg avatar Nov 03 '16 10:11 blablablerg

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

gambleben avatar Apr 22 '22 05:04 gambleben

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

mages avatar Apr 22 '22 10:04 mages

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!

gambleben avatar Apr 22 '22 16:04 gambleben

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

mages avatar Apr 22 '22 16:04 mages

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 ],

gambleben avatar Apr 22 '22 16:04 gambleben

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

image

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?

mages avatar Apr 22 '22 17:04 mages

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

mages avatar Apr 22 '22 17:04 mages

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

gambleben avatar Apr 22 '22 19:04 gambleben

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:

image

mages avatar Apr 22 '22 21:04 mages

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

gambleben avatar Apr 22 '22 22:04 gambleben