This is a migrated thread and some comments may be shown as answers.

Supports milliseconds?

4 Answers 148 Views
GanttView
This is a migrated thread and some comments may be shown as answers.
Talis
Top achievements
Rank 1
Talis asked on 04 Apr 2018, 10:39 AM

Hi,

Small question.

GanttView supports milliseconds in TimeLine.

In my project i need add timeline (with task) from task in from 0,25 to 2 seconds.

4 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 04 Apr 2018, 02:27 PM
Hello Talis,

Thank you for writing.

RadGanttView can support tasks in seconds and milliseconds as well. The OnePixelTime property of the graphical view determines how much time a single pixel represents and if you would be having tasks that short you will need to set it to a very small TimeSpan value. The smallest timeline range which we have at the moment is DayQuarterHours which will create timeline items at every 15 minutes. If you need to use a smaller range you can also consider creating a custom timeline view. A sample approach is demonstrated here: https://docs.telerik.com/devtools/winforms/ganttview/timeline/timeline-views.

The code snippet below will create a timeline view spanning 10 seconds having several tasks and 1 pixel equalling 25 milliseconds: 
public partial class GanttForm : Telerik.WinControls.UI.RadForm
{
    public GanttForm()
    {
        InitializeComponent();
 
        this.radGanttView1.Ratio = 0.35f;
 
        DateTime start = new DateTime(2010, 10, 10, 9, 0, 0);
        DateTime end = start.AddSeconds(10);
 
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineStart = start;
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineEnd = end;
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineRange = Telerik.WinControls.UI.TimeRange.DayQuarterHours;
        this.radGanttView1.GanttViewElement.GraphicalViewElement.OnePixelTime = new TimeSpan(0, 0, 0, 0, 25);
 
        //setup data items
        GanttViewDataItem item1 = new GanttViewDataItem();
        item1.Start = start.AddSeconds(2);
        item1.End = start.AddSeconds(6);
        item1.Progress = 30m;
        item1.Title = "Summary task.1. title";
 
        GanttViewDataItem subitem11 = new GanttViewDataItem();
        subitem11.Start = start.AddSeconds(3);
        subitem11.End = start.AddSeconds(5);
        subitem11.Progress = 10m;
        subitem11.Title = "Sub-task.1.1 title";
 
        GanttViewDataItem subitem12 = new GanttViewDataItem();
        subitem12.Start = start.AddSeconds(4);
        subitem12.End = start.AddSeconds(4).AddMilliseconds(250);
        subitem12.Progress = 20m;
        subitem12.Title = "Sub-task.1.2 title";
 
        //add subitems
        item1.Items.Add(subitem11);
        item1.Items.Add(subitem12);
 
        this.radGanttView1.Items.Add(item1);
 
        GanttViewTextViewColumn titleColumn = new GanttViewTextViewColumn("Title");
        GanttViewTextViewColumn startColumn = new GanttViewTextViewColumn("Start");
        startColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
        GanttViewTextViewColumn endColumn = new GanttViewTextViewColumn("End");
        endColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
 
        this.radGanttView1.GanttViewElement.Columns.Add(titleColumn);
        this.radGanttView1.GanttViewElement.Columns.Add(startColumn);
        this.radGanttView1.GanttViewElement.Columns.Add(endColumn);
    }
}

I am also attaching a screenshot showing the result on my end.

I hope this helps. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Talis
Top achievements
Rank 1
answered on 05 Apr 2018, 04:44 PM

Hi,

Big thanks for response.

Can you answer a couple more questions?

1) Can in GanttView add many task (rhombus) in one line?
2) I try create "Custom timeline" but in help page have not a good example for my task (Seconds and millisecond). May by you have another example with up timeline have seconds diapason and down with microseconds? 

For example i ann file.

0
Hristo
Telerik team
answered on 10 Apr 2018, 11:49 AM
Hello Talis,

Thank you for writing back.

RadGanttView is designed to support a single item per row. You can handle the ItemPaint event which provides access to the Graphics object and paint custom objects in the graphical view: https://docs.telerik.com/devtools/winforms/ganttview/formatting/custom-painting

Regarding the custom timeline, you can test the sample implementation below. Basically, the range is separated in seconds and a header element is created every 10 seconds: 
public partial class GanttForm : Telerik.WinControls.UI.RadForm
{
    public GanttForm()
    {
        InitializeComponent();
 
        this.radGanttView1.Ratio = 0.35f;
 
        DateTime start = new DateTime(2010, 10, 10, 10, 0, 0);
        DateTime end = start.AddSeconds(100);
 
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineRange = TimeRange.Custom;
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineBehavior = new SecondsGanttViewTimelineBehavior();
 
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineStart = start;
        this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineEnd = end;
         
 
        this.radGanttView1.GanttViewElement.GraphicalViewElement.OnePixelTime = new TimeSpan(0, 0, 0, 0, 25);
 
        //setup data items
        GanttViewDataItem item1 = new GanttViewDataItem();
        item1.Start = start.AddSeconds(2);
        item1.End = start.AddSeconds(6);
        item1.Progress = 30m;
        item1.Title = "Summary task.1. title";
 
        GanttViewDataItem subitem11 = new GanttViewDataItem();
        subitem11.Start = start.AddSeconds(3);
        subitem11.End = start.AddSeconds(5);
        subitem11.Progress = 10m;
        subitem11.Title = "Sub-task.1.1 title";
 
        GanttViewDataItem subitem12 = new GanttViewDataItem();
        subitem12.Start = start.AddSeconds(4);
        subitem12.End = start.AddSeconds(4).AddMilliseconds(250);
        subitem12.Progress = 20m;
        subitem12.Title = "Sub-task.1.2 title";
 
        //add subitems
        item1.Items.Add(subitem11);
        item1.Items.Add(subitem12);
 
        this.radGanttView1.Items.Add(item1);
 
        GanttViewTextViewColumn titleColumn = new GanttViewTextViewColumn("Title");
        GanttViewTextViewColumn startColumn = new GanttViewTextViewColumn("Start");
        startColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
        GanttViewTextViewColumn endColumn = new GanttViewTextViewColumn("End");
        endColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
 
        this.radGanttView1.GanttViewElement.Columns.Add(titleColumn);
        this.radGanttView1.GanttViewElement.Columns.Add(startColumn);
        this.radGanttView1.GanttViewElement.Columns.Add(endColumn);
    }
}
 
public class SecondsGanttViewTimelineBehavior : BaseGanttViewTimelineBehavior
{
    public override DateTime AdjustedTimelineStart
    {
        get
        {
            if (this.GraphicalViewElement.TimelineRange != TimeRange.Custom)
            {
                return base.AdjustedTimelineStart;
            }
             
            return this.GraphicalViewElement.TimelineStart;
        }
    }
 
    public override DateTime AdjustedTimelineEnd
    {
        get
        {
            if (this.GraphicalViewElement.TimelineRange != TimeRange.Custom)
            {
                return base.AdjustedTimelineEnd;
            }
             
            return this.GraphicalViewElement.TimelineEnd.AddSeconds(100);
        }
    }
 
    public override IList<GanttViewTimelineDataItem> BuildTimelineDataItems(TimeRange range)
    {
        if (range != TimeRange.Custom)
        {
            return base.BuildTimelineDataItems(range);
        }
 
        return this.BuildTimelineDataItemsForSecondsRange();
    }
 
    public IList<GanttViewTimelineDataItem> BuildTimelineDataItemsForSecondsRange()
    {
        List<GanttViewTimelineDataItem> result = new List<GanttViewTimelineDataItem>();
 
        DateTime adjustedStart = this.AdjustedTimelineStart;
        DateTime adjustedEnd = this.AdjustedTimelineEnd;
 
        if ((adjustedEnd - adjustedStart).Minutes > 10)
        {
            return result;
        }
 
        DateTime currentDate = adjustedStart;
        int currentSecondNumber = currentDate.Second;
        int newSecondNumber = currentSecondNumber;
        GanttViewTimelineDataItem item = new GanttViewTimelineDataItem(currentDate, currentDate.AddSeconds(10), this.GraphicalViewElement.TimelineRange, this.GraphicalViewElement.OnePixelTime);
        result.Add(item);
 
        while (currentDate < adjustedEnd)
        {
            item.End = currentDate.AddSeconds(10);
 
            currentDate = currentDate.AddSeconds(10);
            newSecondNumber = currentDate.Second;
 
            if (newSecondNumber != currentSecondNumber && newSecondNumber % 10 == 0 && currentDate <= adjustedEnd)
            {
                currentSecondNumber = newSecondNumber;
                item = new GanttViewTimelineDataItem(currentDate, currentDate, this.GraphicalViewElement.TimelineRange, this.GraphicalViewElement.OnePixelTime);
                result.Add(item);
            }
        }
 
        return result;
    }
 
    public override GanttTimelineCellsInfo GetTimelineCellInfoForItem(GanttViewTimelineDataItem item, TimeRange range)
    {
        if (range != TimeRange.Custom)
        {
            return base.GetTimelineCellInfoForItem(item, range);
        }
 
        return this.GetTimelineCellInfoForDecadeRange(item);
    }
 
    public GanttTimelineCellsInfo GetTimelineCellInfoForDecadeRange(GanttViewTimelineDataItem item)
    {
        int seconds = 10;
 
        return new GanttTimelineCellsInfo(seconds);
    }
 
    public override string GetTimelineTopElementText(GanttViewTimelineDataItem item)
    {
        if (item.Range != TimeRange.Custom)
        {
            return base.GetTimelineTopElementText(item);
        }
 
        string format = "{0:hh:mm:ss}";
        return string.Format(System.Threading.Thread.CurrentThread.CurrentUICulture, format, item.Start, item.End);
    }
 
    public override string GetTimelineBottomElementText(GanttViewTimelineDataItem item, int index)
    {
        if (item.Range != TimeRange.Custom)
        {
            return base.GetTimelineBottomElementText(item, index);
        }
 
        string format = "{0} s";
        return string.Format(System.Threading.Thread.CurrentThread.CurrentUICulture, format, item.Start.Second + index);
    }
}

Please note that such an approach would only be suitable for a timeline view with a very short span, as elements will be created for each second. I am also attaching a short video showing the result on my end.

I hope this helps. Let me know if you have other questions.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Talis
Top achievements
Rank 1
answered on 11 Apr 2018, 08:53 AM

Hi Hristo,

Thanks for you example. It is help me.

Tags
GanttView
Asked by
Talis
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Talis
Top achievements
Rank 1
Share this question
or