Hi,
n
n
You can reference to the ‘TaskItem’ interface in jsGantt API to set the data in ‘body’ setting. I follow Curtis’s steps, and I can make it works. I would like to share my steps to you.
n
1. I add a HTML Form web part into the page, set the below HTML code in the Source Editor:
n
<link rel="stylesheet" type="text/css" ref="/_Layouts/QuestSoftware/jsgantt.css" />
n
<script language="javascript" src="/_Layouts/QuestSoftware/jsgantt.js"></script>
n
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
n
<script language="javascript">
n
var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
n
</script>
n
Of course, I put the jsgantt.css and jsgantt.js files into the /layout/ QuestSoftware folder.
n
n
2. Configure qListView to the list, set the ‘Custom Display’ as below:
n
Results Header:
n
<script language="javascript">
n
Result Body:
n
g.AddTaskItem(new JSGantt.TaskItem(<%ID%>, 'Define Chart API', '<%Start Date%>', '<%End Date%>', 'ff0000', 'http://help.com', 0, '<%Resource%>', <%Complete%>, 0, 0, 1));
n
Result Footer:
n
g.Draw();
n
g.DrawDependencies();
n
</script>
n
3. Save all.
n
n
In the step 2, the <%[FIELD]%> will be replace to the real field’s data. After that, the gantt chart should be rendered.
n
n