Gantt Chart - Databinding

[Edward]

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!

[Giuseppe]

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.