Widget:Gantt

/* <![CDATA[ */ var g; $(function { var $d = $("#"),      columns = "",      cnmap = {id: 0, name: 1, start: 2, end: 3, color: 4, link: 5,                milestone: 6, resource: 7, complete: 8, group: 9,                parent: 10, open: 11, dependencies: 12, linkname: -2},      i, cnames, c = [],      tableColumnCount = $d.find('tr:eq(1)>td').length;

// change yyyy-mm-dd to mm/dd/yyy function convertDate(s) { if (!s || s.indexOf('-') < 0) { return s;   } d = s.split('-'); return d[1] + '/' + d[2] + '/' + d[0]; } // convert No, no, N, n, and 0 to "", everything else is "1" function convertYesNo(s) { if (!s) return ''; s = s.toLowerCase; if ((s === 'no') || (s === '0') || (s === '')) { return ''; } 	return '1'; } $('head').append(''); if (columns.length) { cnames = columns.split(';'); cnames.forEach(function(v, i) {     var cn = v.toLowerCase;      if (cn === '') {      	c.push(-1);      } else if (cnmap.hasOwnProperty(cn)) {        c.push(cnmap[cn]);      } else {      	alert('Unknown Gantt Chart column name: ' + cn);      }    }); } else { for (i=0; i<13; i++) { c[i] = i;   } } if (c.length !== tableColumnCount) { alert('Table has ' + tableColumnCount + ' columns\nbut widget describes ' + c.length + ' columns.'); }

$.getScript('/extensions/WE/vendor/jsgantt/jsgantt-min.js', function {   g = new JSGantt.GanttChart('g', document.getElementById('WEGanttChart'), "");    g.setDateInputFormat('mm/dd/yyyy');    g.setDateDisplayFormat('yyyy-mm-dd');    g.setShowComp(0);    $d.find('tr').each(function { var r = [, , , , , , , , , , , , ''];

if ($(this).find('th').length === 0) { $(this).find('td').each(function (i) {         var $a;          if (c[i] >= 0) {            r[c[i]] = $.trim($(this).text);          } else if (c[i] === -2) {          	// a wiki linked name          	$a = $(this).find('a');          	r[5] = ($a.length) ? $a.attr('href') : '';	// link        	r[1] = $.trim($(this).text);		// name          }        }); r[0] = r[0].replace(/[^-a-zA-Z0-9]/g, ''); r[10] = r[10].replace(/[^-a-zA-Z0-9]/g, ''); r[12] = r[12].replace(/[^-,a-zA-Z0-9]/g, '');

r[2] = convertDate(r[2]); r[3] = convertDate(r[3]); if (r[4] && r[4][0] === '#'){ r[4] = r[4].slice(1); }       r[6] = convertYesNo(r[6]); r[9] = convertYesNo(r[9]); r[11] = convertYesNo(r[11]); // 0:ID, 1:Name, 2:Start, 3:End, 4:Color, 5:Link, 6:Mile, 7:Resource, 8:Complete, 9:Group, 10:Parent, 11:Open, 12:Dependencies g.AddTaskItem(new JSGantt.TaskItem(r[0], r[1], r[2], r[3], r[4], r[5], r[6], r[7], r[8], r[9], r[10], r[11], r[12])); }   });    if ("") {      $d.hide;    }    g.Draw;    g.DrawDependencies;    // hide text/graph misalignment    $('.gname,.gdatehead').css('height', '19px');  }); }); /* ]]> */

This widget renders a table as a Gantt chart. The table is expected to have these columns:

Parameter

 * table:HTML id of data table
 * format:one of day, week, month, quarter
 * hide:hide the data table if set (optional)
 * columns
 * a semicolon separated list that case-insensitively maps the position of a table column to one of the columns specified above (optional, if not specified the first columns of each row of the table are assumed to be in the order shown above) Example: id;name;start;end;;;color;link;milestone;resource;complete;parent;group;open;dependencies would skip over a couple of columns in the middle of the table, and reverse the order of the group and parent columns linkname is a magic column name that is assumed to be a link with the contents being the name attribute


 * minheight:the minimum height of the chart display element, including CSS units, such as 120px or 10ex</tt>. Setting this to the approximate chart size minimizes the perceived redrawing when the chart is inserted on the page. (optional, default: 100px</tt>)