Gantt chart example

Thread is closed for posting
4 posts, 0 answers
  1. M. R.
    M. R. avatar
    49 posts
    Member since:
    Dec 2009

    Posted 01 Apr 2010 Link to this post


    I need to create a Gantt chart for project management, on an ASP page: on X axis I need Date and on Y axis a list of projects. It should look similar to a MS Project Gantt chart.
    I looked in the documentation but the Gantt chart example does not contain code samples demonstrating how to achieve this.
    Can you please provide a sample project?

    I am using the latest Telerik ASP.NET AJAX Q1 2010

    M. Rusu

  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 02 Apr 2010 Link to this post

    In order to get DateTime variables bound to one of your axis you will have to look into the Numerical Axis demo. As you can see this converts the date to something that is readable by the data engine (a float) and you can assign that to your axis. All you will have to change really is the type of the chart (Gantt in your case) and the logic in that demo should be fine.
  3. M. R.
    M. R. avatar
    49 posts
    Member since:
    Dec 2009

    Posted 07 Apr 2010 Link to this post

    Thanks for your help Schlurk. I was able to create the chart; however, I have now a different problem.

    1. If I need to display Gantt information on 50-100 projects, then the chart becomes almost impossible to read as there is too much information and it does not support scrolling in Gantt mode.
    Therefore I need a way to resize it. Is this possible?

    2. Is there a way to draw a vertical (or horizontal) line on the chart corresponding to 'today's date'?


  4. Ves
    Ves avatar
    2926 posts

    Posted 09 Apr 2010 Link to this post

    Hello M. R.,

    RadChart is rendered in html as an image so there are two ways to resize it. You can set its size (width and height) in the server-side code or you can resize the image within the browser as shown in this code library. Note, that resizing an image with javascript might lead to a distortion.

    The line -- you can take advantage of the Marked Zones feature (example is available here). Providing equal values for one of the pairs [ValueStartX, ValueEndX] or [ValueStartY, ValueEndY] would lead to displaying only the border, here is an example:

    <telerik:ChartMarkedZone ValueEndY="4" ValueStartY="4" ValueStartX="0" ValueEndX="10">
        <Appearance Border-Color="Red" Border-Width="1">

    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top