Timeline Year Control

An ASP.Net year indicator timeline control.

This control is compatible with all the current web browsers.

<tl:Timeline ID="timeline1" runat="server" FromYear="1984" ToYear="2013" CssClass="Timeline" IndicatorCssClass="TimelineIndicator" GenerateLabels="true" LabelCssClass="TimelineLabel" LabelArrowCssClass="TimelineLabelArrow" BigYearIndicator="5" SmallYearIndicator="1">
    <Values>
        <tl:TimelineValue FromYear="1984" ToYear="1990" BackgroundCssClass="TimelineValue1" />
        <tl:TimelineValue FromYear="1991" ToYear="1994" BackgroundCssClass="TimelineValue2" />
        <tl:TimelineValue FromYear="1996" ToYear="2000" BackgroundCssClass="TimelineValue3" />
        <tl:TimelineValue FromYear="2002" ToYear="2005" BackgroundCssClass="TimelineValue4" />
    </Values>
</tl:Timeline>
<br />
<tl:Timeline ID="timeline2" runat="server" FromYear="1984" ToYear="2013" CssClass="Timeline" IndicatorCssClass="TimelineIndicator" BigYearIndicator="5" SmallYearIndicator="1">
    <Values>
        <tl:TimelineValue FromYear="1995" ToYear="1995" BackgroundCssClass="TimelineValue1" />
        <tl:TimelineValue FromYear="2000" ToYear="2002" BackgroundCssClass="TimelineValue2" />
        <tl:TimelineValue FromYear="2006" ToYear="2013" BackgroundCssClass="TimelineValue3" />
    </Values>
</tl:Timeline>
<br />
<tl:Timeline ID="timeline3" runat="server" />

 

//Init timeline3 by code
timeline3.FromYear = 1984;
timeline3.ToYear = 2013;
timeline3.CssClass = "Timeline";
timeline3.IndicatorCssClass = "TimelineIndicator";
timeline3.BigYearIndicator = 5;
timeline3.SmallYearIndicator = 1;

timeline3.Values.Add(new TimelineValue(1985, 2000, "TimelineValue1"));
timeline3.Values.Add(new TimelineValue(2010, 2010, "TimelineValue2"));
timeline3.Values.Add(new TimelineValue(2012, 2012, "TimelineValue3"));

Last edited Jul 30, 2013 at 6:24 AM by fvanonckelen, version 20