[Anonymous]

Quest Web Parts do not currently support the SharePoint Gantt View.  We have a Gantt Web Part planned as a future Quest Web Part.  Until then, a potential workaround is to use the qListview to generate a Javascript Gannt chart using the "Custom Display" option.  Here is a link to a pure JavaScript Gantt Chart:

http://www.jsgantt.com/

You can use the qListView Custom Display Header Section for steps 1 through 4 and the Body section for step 5, Step 6 would be in the Custom Display Footer Section.

Curtis Kelly

PM, Quest Web Parts for SharePoint

[Anonymous]

A couple questions:

1. Where does the javascript get saved on my SP site
2. For the body section, how do you get it to load the data that would be returned into the body of the qlistview (or is this just automatic)?  It looks like it needs to be in a certain format.

Sorry if this is basic stuff, but I am not sure how to proceed.

Thanks'

[Anonymous]

Did you ever get this to work?  Before spending a lot of time trying I thought I'd see if you had any luck.

Thanks!

[Anonymous]

Sandy, yes I did get it all working. 

In the qListView webpart:

1. Add your list to the Viewed Lists section on the Display tab
2. Navigate to the Custom Display tab
3. Add the top part of the code to the results header section (as defined above by Curtis)
4. In results body place the field to be graphed (i.e., <%GanttData%>)
5. In the Results footer, add the g.Draw() and the remainder of the script

I had all of the data added into a calculated field formatted in the correct format.  If the data is not in the correct format, the chart will not display.  I found that you need to eliminate any trailing ',' in the data where parameters are not valued at the end of the data parameters.  Once I figured this out, all worked fine.

Jeff

[Anonymous]

Awesome…thanks for the response!  I got it working as well…thanks for the great idea and work around for the ugly out of the box gantt charts that SharePoint provides.

[Anonymous]

Hi Curtis,

n

I've followed your example but I'm still seeing an empty qListView webpart.  Do you have any additional information on this technique?

n

Thanks,

n

Matt

[Anonymous]

Can anyone explain what exactly they put into the body block?

n

 

[Anonymous]

Hello All,

We are trying to determine if it is possible to use the qListView to display a roll-up of multiple lists, using the Gantt View, or at least simulating it.  Or should i be looking at qChartView configurations?  Has anyone ever attempted this?

Thanks!

[Anonymous]

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

[Author]

Posts