timeline for

Posted on 2012-08-16
Last Modified: 2012-08-31
I need a fantastic timeline control for / javascript |jquery.

I've tried TimeGlider.  Michael is a great guy, and that tool will someday have it all together, but for now -- at least to me -- it's a soup sandwich.  All over the place, and too little documentation.  I've struggled with it for too long, and I have to stop now.

I've also looked at Vaadin Timeline (, and it looks promising but it's a Java thing.  I need an ASP.NET compatible and customizable solution.

Also looked at Timeline JS ( and its cousin Timeline Portfolio (

I need this in a timeline tool:

o  Can feed it data via an XML or JSON file or through a callback.

o  Can display datapoints in series.

o  Series can have different symbologies.

o  Datapoints can have customizable tooltips and a Click() event that can be hooked.

o  Timeline is zoomable in addition to being drag-scrollable.

I'd really like to find someone who's tried various Timeline tools and has a good one that's NOT listed above.  This would be much preferable to someone who just runs a Google search and starts slinging results at me.

Going back to Google now.  Would appreciate ideas if you've also been down this path before.
Question by:bamapie
    LVL 26

    Accepted Solution

    Hi bamapie,
    was looking for something similar some time ago, ended up rolling my own, using of all things, MS Charts for ASP .Net (System.Web.DataVisualization). It actually worked out pretty good, but it's very customised to the clients particular needs, consumes data from SQL datasource, made it date range sensitive with an ajax calendar and an update panel triggered by the date range inputs. Used a StackedBar chart type to stack the timeline defined periods (YValueMembers ) and client for the XValueMember of each series.

        <asp:Series Name="Series1" XValueMember="client" LabelUrl="~/referral/default.aspx" YValueMembers="axdate_elapsed"  ChartType="StackedBar" BorderColor="Transparent" Color="Transparent" LegendText="Ax Date" Legend="Legend1" ToolTip="" IsVisibleInLegend="false"></asp:Series>
        <asp:Series Name="Series2" XValueMember="client" LabelUrl="~/referral/default.aspx" YValueMembers="Con_Report_elapsed"  ChartType="StackedBar" BorderColor="255, 192, 192, 192" Color="#99CC66" LegendText="Con reporting period" Legend="Legend1" ToolTip="Con reporting period" LabelForeColor="Black" Font="Trebuchet MS, 6.75pt, style=Bold" ><SmartLabelStyle AllowOutsidePlotArea="No" CalloutLineAnchorCapStyle="None" /></asp:Series>
        <asp:Series Name="Series3" XValueMember="client" LabelUrl="~/referral/default.aspx" YValueMembers="Sur_Report_elapsed" ChartType="StackedBar" BorderColor="255, 192, 192, 192" Color="#000099" LegendText="Sur reporting period" Legend="Legend1" ToolTip="Sur reporting period" LabelForeColor="White" Font="Trebuchet MS, 6.75pt, style=Bold"><SmartLabelStyle AllowOutsidePlotArea="No" CalloutLineAnchorCapStyle="None" /></asp:Series>
        <asp:Series Name="Series4" XValueMember="client" LabelUrl="~/referral/default.aspx" YValueMembers="Ref_Report_elapsed" ChartType="StackedBar" BorderColor="255, 192, 192, 192" Color="#FF9900" LegendText="Ref reporting period" Legend="Legend1" ToolTip="Ref reporting period" Label="" Font="Trebuchet MS, 6.75pt, style=Bold"><SmartLabelStyle AllowOutsidePlotArea="No" CalloutLineAnchorCapStyle="None" /></asp:Series>

    Open in new window

    Used the Chart_Customize event to do a few things like populating the custom labels with the correct dates incremented from the start date.
    Protected Sub Chart1_Customize(ByVal sender As Object, ByVal e As System.EventArgs)
                        For i = 0 To 31
                            Chart1.ChartAreas(0).AxisY.CustomLabels.Add(i, i + 1, dt.ToString("d MMM"))
                            Chart1.ChartAreas(0).AxisY2.CustomLabels.Add(i, i + 1, dt.ToString("d MMM"))
                            dt = dt.AddDays(1)

    Open in new window

    Anyhow, sure your requirements will be vastly different to mine, just wanted to suggest the option of using ms charts controls to represent a timeline; apart from the zoom requirement, ms charts can handle all the other requirements you cited.

    Alan ";0)

    Author Closing Comment

    Went with Google's version.  Loving it.  Thanks for the info.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now