Sign in to follow this  
GregS

Gantt Chart Columns

Recommended Posts

I have a newbie type question about the display of columns in the Gantt chart component.

 

Background: I'm a developer on an application that uses Fusion Charts, including the Gantt chart control. I've been asked to look into making some changes to how our Gantt chart works. However I've never worked with Fusion charts before, and unfortunately the developers here who worked with Fusion charts have all left the company.

 

Our application is written in C# on the server side, with javascript on the client. We generate our Gantt chart in the server code once, and thereafter handle changes to display (like resizing) in javascript on the client.

 

Here's the issue. Currently when we generate the chart, we predefine it to display 6 columns (each representing a month). When the user resizes the chart, it always displays exactly 6 columns, so that even if there is enough space to show all the columns, we only see six and the user has to scroll to get to the rest.

 

What we would like would be if it could fit as many columns into the visible area as possible, with a minimum column width being set as a lower bound. For example, if there are 500 pixels of space available for columns and we set the minimum width to 50, then we'd see 10 columns and the horizontal scrollbar would show up only if there are more than 10 columns. If there are 250 pixels of space we'd see 5 columns and no horizontal scrollbar, 200 pixels 4 columns, etc.

 

From looking into the Fusion charts code it doesn't appear to be possible to do this. It seems that we can only specify the number of columns to show (using the ganttPaneDuration attribute in the chart XML element) and have no control over column width. It also seems that we can set the number of columns only when the table is generated, so if we wanted to change the number of columns dynamically we'd have to regenerate the chart on the server (which for performance reasons is not acceptable).

 

Can anyone tell me if my understanding of this is correct, or if there is a way to get the Gantt chart to readjust the number and sizes of its columns during resizing (from javascript)?

 

Thanks

Greg S.

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Greg,

 

A warm welcome to FusionCharts Forum! smile.gif

 

Can you please paste your chart XML here? it would be helpful to look into it.

 

Also, send us the screen-shot of the same.

Share this post


Link to post
Share on other sites

Hi Sumedh,

 

Here's the XML code. This is for a chart with 8 columns of data, which means that there will be two columns outside of the visible pane. We are generating this code in C#. I had to capture it in the debugger and format it to make it readable. I also have attached a screenshot of the chart as a jpg.

 

<?xml version="1.0" encoding="UTF-8"?>

<Chart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" showprintmenuitem="0" showpreviewmenuitem="1" baseFontSize="11" ganttPaneDuration="6" ganttPaneDurationUnit="m" legendUseCustomMarkers="1" exportEnabled="0">

<Categories isBold="1" align="center">

<Category start="06/01/2011" end="12/31/2011" label="2011" />

<Category start="01/01/2012" end="01/31/2012" label="2012" />

</Categories>

<Categories isBold="1" align="center">

<Category start="06/01/2011" end="06/30/2011" label="Jun" />

<Category start="07/01/2011" end="07/31/2011" label="Jul" />

<Category start="08/01/2011" end="08/31/2011" label="Aug" />

<Category start="09/01/2011" end="09/30/2011" label="Sep" />

<Category start="10/01/2011" end="10/31/2011" label="Oct" />

<Category start="11/01/2011" end="11/30/2011" label="Nov" />

<Category start="12/01/2011" end="12/31/2011" label="Dec" />

<Category start="01/01/2012" end="01/31/2012" label="Jan" />

</Categories>

<Processes isAnimated="1" headerVAlign="middle" align="left">

<Process label=" Comprehensive review of customer service call handling" id="1" isBold="1" isItalic="1" />

<Process label=" Review call handling process" id="2" />

<Process label=" Run latest call center reports" id="3" />

<Process label=" Meetings with team leaders" id="4" />

<Process label=" Incorporate team leader feedback" id="5" />

<Process label=" Pilot new call handling process" id="6" />

<Process label=" Review call center KPIs during/after pilot" id="7" />

<Process />

</Processes>

<Tasks>

<Task processId="2" start="06/03/2011" end="10/14/2011" id="2" color="BEBEBE" height="6" toolText="Jun 3 2011 - Oct 14 2011" />

<Task processId="3" start="10/13/2011" end="10/18/2011" id="3" color="BEBEBE" height="6" toolText="Oct 13 2011 - Oct 18 2011" />

<Task processId="4" start="10/18/2011" end="11/01/2011" id="4" color="BEBEBE" height="6" toolText="Oct 18 2011 - Nov 1 2011" />

<Task processId="5" start="11/02/2011" end="11/20/2011" id="5" color="BEBEBE" height="6" toolText="Nov 2 2011 - Nov 20 2011" />

<Task processId="6" start="11/16/2011" end="12/16/2011" id="6" color="BEBEBE" height="6" toolText="Nov 16 2011 - Dec 16 2011" />

<Task processId="7" start="11/16/2011" end="01/04/2012" id="7" color="BEBEBE" height="6" toolText="Nov 16 2011 - Jan 4 2012" />

<Task processId="1" start="06/03/2011" end="01/04/2012" id="1" color="BEBEBE" height="10" showAsGroup="1" toolText="Jun 3 2011 - Jan 4 2012" />

</Tasks>

<Trendlines />

<Milestones>

<Milestone date="06/03/2011" taskId="2" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Jun 3 2011" />

<Milestone date="10/14/2011" taskId="2" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Oct 14 2011" />

<Milestone date="10/13/2011" taskId="3" color="FFFF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Oct 13 2011" />

<Milestone date="10/18/2011" taskId="3" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Oct 18 2011" />

<Milestone date="10/18/2011" taskId="4" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Oct 18 2011" />

<Milestone date="11/01/2011" taskId="4" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Nov 1 2011" />

<Milestone date="11/02/2011" taskId="5" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Nov 2 2011" />

<Milestone date="11/20/2011" taskId="5" color="FF0000" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Nov 20 2011" />

<Milestone date="11/16/2011" taskId="6" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Nov 16 2011" />

<Milestone date="12/16/2011" taskId="6" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Dec 16 2011" />

<Milestone date="11/16/2011" taskId="7" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Nov 16 2011" />

<Milestone date="01/04/2012" taskId="7" color="00FF00" shape="Polygon" numSides="4" startAngle="45" radius="8" borderThickness="1" borderColor="#A9A9A9" toolText="Jan 4 2012" />

</Milestones>

<Legend>

<Item label="Actual" color="D3D3D3" numSides="4" startAngle="45" />

<Item label="Forecast" color="D3D3D3" numSides="4" startAngle="0" />

<Item label="Planned" color="D3D3D3" numSides="3" startAngle="90" />

</Legend>

</Chart>

 

 

Thanks!

Greg S.

post-33359-0-34919800-1354210114_thumb.jpg

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Greg,

 

Thanks for sharing the chart XML.

 

Here, you have specified "ganttPaneDuration" attribute as "6", So, the chart will always display the 6 months (6 columns) irrespective of chart dimensions.

 

So, if you want to display 8 months of data (8 columns), then you would need to set "ganttPaneDuration" as "8".

 

Configuring the displaying of columns depending on the availability of space is not possible.

 

For more information, please refer the following link:

http://docs.fusioncharts.com/widgets/Contents/?Gantt/Scroll.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Thanks for your reply.

 

> So, if you want to display 8 months of data (8 columns), then you would need to set "ganttPaneDuration" as "8".

 

Yes, I am aware of that. The point is that if we have n columns of data we don't want to just set the ganttPaneDuration to n, because n can sometimes be large (e.g. 36 for three years' worth of data), and at large numbers the columns end up being too narrow to fit in the available display area. So we often need to set ganttPaneDuration to something less than n, and then rely on the horizontal scrolling behavior to see the rest. Currently our charts support that. The problem is that the chart won't show *more* than ganttPaneDuration columns even when there's plenty of room to do so. For example, if we have 12 columns of data and are showing 6, when we resize the chart's page to be twice its earlier width, there's now room to show all 12 columns but instead the chart just shows six and doubles the widths of all these columns. Ideally we'd like it to attempt to fit as many columns as possible into the visible area, constrained by a minimum column width. That's what I'm trying to find out if we can achieve or not.

 

Thanks,

Greg S.

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Greg,

 

The feature which you are trying to implement is not possible. For this, you would need to update the "ganttPaneDuration" attribute dynamically depending on your dynamic data.

 

You would need to write own logic for this. Since "ganttPaneDuration" is a <chart> element level attribute, you can update the "ganttPaneDuration" attribute by getting the chart-id.

 

For more information, please refer the following URL:

http://docs.fusioncharts.com/widgets/Contents/?JavaScript/JS_ChangeChartProperties.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this