One of RadChart’s most powerful features is its support for DataBinding. This means that as long as you correctly format your data source, you shouldn’t have to write any backend code to support the generation of the chart. Using a data source with a control as powerful and complex as the RadChart can unfortunately be somewhat confusing. In this post, I’ll shed some light on one of the scenarios you are sure to come across, displaying incremental DateTime values from a data source in the X-Axis of RadChart.

Setting Up the Data Source

RadChart does not work directly with DateTime values. Instead, it supports something called the OLE Automation Date. According to the MSDN, an OLE Automation Date is implemented as a floating-point number. In using this type of value, RadChart can more efficiently manage date time information behind the scenes. The following SQL query shows how a DateTime value can be converted to the OLE Automation Date as part of the query.

 

 

Setting Up the RadChart

After setting up the data source, telling RadChart to display incremental DateTime values is as easy as setting the following properties.

• PlotArea –> XAxis –> Appearance –> ValueFormat
  • Setting this property to ShortDate or one of its equivilents tells RadChart to display incremental DateTime values.
• PlotArea –> XAxis –> Appearance –> DataLabelsColumns
  • This property must be set to the column containing the OLE Automation Date formatted DateTime values in the Data Source. For this example, this value should be set to OADate.
• PlotArea –> XAxis –> Appearance –> LabelStep
  • If your data source contains more than a few dates, it could quickly become very cluttered and unreadable. Setting this property will reduce the amount of labels displayed in the generated chart. In the example code, the LabelStep has been set to 3.

You will also need to add at least one series to RadChart. This series will need to have its DataYColumn property set to the SubTotal column of the Data Source.

 

The Generated RadChart

Once all of these properties have been set, the generated chart looks as follows. 

Figure 1. RadChart with DateTimes in X-Axis

Click here to download the source code used in this post.

 

Note: The engine of RadChart for ASP.NET AJAX has been used in both RadChart for Windows Forms and in the Telerik Reporting chart item, so the provided solution applies for them as well.