1

I am working on creating a Gantt Chart for a work assignment, and am having some trouble adding styling. Specifically, I would like to add vertical lines at specific dates to denote deadlines.

I have checked out some of the other solutions on Stack Overflow and have not been able to find one that works thus far. I think one potential option would be to use SCSS and target the g elements of the SVG, but I don't have a tone of experience with it and could use some guidance (if this is the method that makes the most sense to use.)

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('string', 'Resource');
  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', 'Read documents', 'Assignment', new Date(2018, 8, 14), new Date(2018, 8, 20), null,  100,  null],
    ['Meet SO', 'Meet with partyA', 'A', new Date(2018, 8, 20), new Date(2018, 8, 28), null,  100,  'Research'],
      ['Meet EP', 'Meet with partyB', 'B', new Date(2018, 8, 28), new Date(2018, 9, 5), null,  0,  'Research, Meet SO'],
        ['Create EP', 'Create partyA Needs Assessments', 'B', new Date(2018, 9, 5), new Date(2018, 9, 12), null,  0,  'Meet EP'],
    ['Meet GM', 'Meet with partyC', 'C', new Date(2018, 9, 11), new Date(2018, 9, 19), null,  0,  'Research'], 
    ['Create BP', 'Craft best practices', 'Assignment', new Date(2018, 9, 19), new Date(2018, 9, 22), null,  0,  ' Meet GM, Meet EP, Meet FV'],
    ['Meet FV', 'Meet with partyD', 'D', new Date(2018, 9, 11), new Date(2018, 9, 19), null,  0,  'Research'],
    ['BM', 'Business Modeling', 'Assignment', new Date(2018, 9, 19), new Date(2018, 9, 26), null,  0,  'Meet EP, Meet GM, Meet FV'],
    ['CM', 'Communication Modeling', 'Assignment', new Date(2018, 10, 1), new Date(2018, 10, 9), null,  0,  'Meet EP, Meet GM, Meet FV'],
    ['Work', 'Work on deliverable', 'Assignment', new Date(2018, 10, 9), new Date(2018, 10, 13), null,  0,  'CM, BM, Create BP, Create EP'],
    ['Engage', 'Engage with community', 'Assignment', new Date(2018, 10, 15), new Date(2018, 10, 29), null,  0,  'CM'],
    ['Final', 'Pitch to admin', 'Final', new Date(2018, 10, 29), new Date(2018, 11, 13), null,  0,  'CM, BM, Create BP, Create EP, Work, Engage']
  ]);

  var options = {
    height: 1000,
    gantt: {
      criticalPathEnabled: false,
      labelStyle: {
        fontName: 'Lato'
      }
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Any help would be greatly appreciated, thank you!

WashU
  • 29
  • 5
  • although for a timeline chart, this answer _might_ help --> [vertical reference line in google timeline visualization](https://stackoverflow.com/a/48509661/5090771) – WhiteHat Oct 04 '18 at 22:20

0 Answers0