Gantt Chart - Databinding

Thread is closed for posting
2 posts, 1 answers
  1. Edward
    Edward avatar
    20 posts
    Member since:
    Mar 2009

    Posted 02 Mar 2009 Link to this post

    How do I get the RadChart to bind to a date column from SQL on the X-Axis?
    I have the following coming back from a stored proc (below are the column names and datatype as they are defined in the table and returned by the stored proc

    taskname - string
    startdate - datetime
    enddate - datetime
    duration - integer

    I cannot for the life of me figure out how to the x-axis to display a date duration along the bottom that will at least take into account the earliest date and the latest date in the dataset returned from the stored proc.  Do I need to return start and end dates in the stored proc?  Configure it somewhere else?  Any help would be appreciated!


  2. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 05 Mar 2009 Link to this post

    Hi Edward,

    RadChart works only on numeric data so in order to display the DateTime values properly, you need to convert them to their numeric equivalent. Generally there are two approaches that can be used for this transformation:

    • via DateTime.ToOADate( ) conversion if you are creating the chart items manually
    • via explicit float cast in the SQL statement if you are databinding the chart via SQL query. (
      "SELECT [Temperature], CAST([Date] AS FLOAT) + 2 as float_date FROM [Table_1]")


    You need to set the Axis.IsZeroBased property to false as otherwise date calculations start from the year 1899 and would not be correct. You also need to set the Axis.Appearance.ValueFormat property in order to instruct the control to interpret the numeric value as its DateTime equivalent when displayed.


    Here is a sample code snippet to get you started as well:

    <asp:SqlDataSource ID="SqlDataSource1" runat="Server"  
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
        SelectCommand="SELECT TOP 3 CAST([ShippedDate] AS FLOAT) + 2 as float_shippeddate, CAST([OrderDate] AS FLOAT) + 2 as float_orderdate, [Freight], [ShipName] FROM [Orders]"
    </asp:SqlDataSource> 
     
    <telerik:RadChart ID="RadChart1" runat="server" DefaultType="Gantt" DataSourceID="SqlDataSource1" AutoLayout="True"
        <Series> 
            <telerik:ChartSeries DataXColumn="float_orderdate" DataXColumn2="float_shippeddate" 
                DataYColumn="Freight" Type="Gantt"
            </telerik:ChartSeries> 
        </Series> 
        <PlotArea> 
            <XAxis IsZeroBased="False"
                <Appearance ValueFormat="ShortDate" > 
                    <LabelAppearance RotationAngle="340"
                    </LabelAppearance> 
                </Appearance> 
            </XAxis> 
        </PlotArea> 
    </telerik:RadChart> 


    Hope this helps.


    Kind regards,
    Manuel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top