Problem with Using Formatting Specifiers in Labels and Tooltips
Specifying date format strings(e.g.{0:D}, {0:F}) are not supported out-of-the-box and will not take effect if used In the DataFormatString property of the RadHtmlChart control. Only the numeric format strings (e.g. {0:e}, {0:p}) are supported for the text elements (such as axis labels, series labels and tooltips).
As of Q3 2012 , the ClientTemplate property can expose additional columns for the series labels and tooltips. With this you are able to specify a date set as a simple string.
Nevertheless, there is a possible approach that will allow you to format the labels in a non-numerical x-axis. For example,let’s take the items in an x-axis whose labels should display a month given an object of type DateTime. Follow these steps to format the labels accordingly:
- On the server side, iterate through the data source that is used for populating the x-axis items.
- Get the DateTime value of the current data source record.
- Convert the DateTime value to a string using the appropriate formatting specifier.
- Create a new AxisItem object by passing the formatted string as a parameter and add it in the Items collection of the x-axis.
Example 1 demonstrates the approach described above.
This approach cannot be used for creating such specially formatted text in SeriesItems' labels and tooltips. Each Series-Item does not have its own tooltip and text properties that can be set declaratively, they are taken from its value automatically. An option is using their ClientTemplates to load a column from the datasource.
You cannot use the DataFormatString property of the x-axis labels either because the x-axis items are created programmatically and are not data bound.
Example 1: Using date format string in RadHtmlChart.
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="500px" Width="500px">
<PlotArea>
<Series>
<telerik:LineSeries Name="Market share in 2011" DataField="MarketShare2011">
<TooltipsAppearance Visible="false" />
</telerik:LineSeries>
</Series>
<XAxis>
<LabelsAppearance RotationAngle="90" />
</XAxis>
<YAxis MaxValue="50">
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false" />
</Legend>
<ChartTitle Text="Chrome market share in 2011">
</ChartTitle>
</telerik:RadHtmlChart>
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart1.DataSource = GetChartData();
RadHtmlChart1.DataBind();
foreach (MarketShareData item in GetChartData())
{
string formattedLabelText = string.Format("{0:MMMM}", item.Date);
AxisItem newAxisItem = new AxisItem(formattedLabelText);
RadHtmlChart1.PlotArea.XAxis.Items.Add(newAxisItem);
}
}
private List<MarketShareData> GetChartData()
{
List<MarketShareData> chromeData = new List<MarketShareData>();
chromeData.Add(new MarketShareData(23.8, new DateTime(2011, 1, 1)));
chromeData.Add(new MarketShareData(24.1, new DateTime(2011, 2, 1)));
chromeData.Add(new MarketShareData(25.0, new DateTime(2011, 3, 1)));
chromeData.Add(new MarketShareData(25.6, new DateTime(2011, 4, 1)));
chromeData.Add(new MarketShareData(25.9, new DateTime(2011, 5, 1)));
chromeData.Add(new MarketShareData(27.9, new DateTime(2011, 6, 1)));
chromeData.Add(new MarketShareData(29.4, new DateTime(2011, 7, 1)));
chromeData.Add(new MarketShareData(30.3, new DateTime(2011, 8, 1)));
chromeData.Add(new MarketShareData(30.5, new DateTime(2011, 9, 1)));
chromeData.Add(new MarketShareData(32.3, new DateTime(2011, 10, 1)));
chromeData.Add(new MarketShareData(33.4, new DateTime(2011, 11, 1)));
chromeData.Add(new MarketShareData(34.6, new DateTime(2011, 12, 1)));
return chromeData;
}
public class MarketShareData
{
public MarketShareData(double marketShare2011, DateTime date)
{
_date = date;
_marketShare2011 = marketShare2011;
}
private DateTime _date;
public DateTime Date
{
get { return _date; }
set { _date = value; }
}
private double _marketShare2011;
public double MarketShare2011
{
get { return _marketShare2011; }
set { _marketShare2011 = value; }
}
}
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
RadHtmlChart1.DataSource = GetChartData()
RadHtmlChart1.DataBind()
For Each item As MarketShareData In GetChartData()
Dim formattedLabelText As String = String.Format("{0:MMMM}", item.[Date])
Dim newAxisItem As New AxisItem(formattedLabelText)
RadHtmlChart1.PlotArea.XAxis.Items.Add(newAxisItem)
Next
End Sub
Private Function GetChartData() As List(Of MarketShareData)
Dim chromeData As New List(Of MarketShareData)()
chromeData.Add(New MarketShareData(23.8, New DateTime(2011, 1, 1)))
chromeData.Add(New MarketShareData(24.1, New DateTime(2011, 2, 1)))
chromeData.Add(New MarketShareData(25.0, New DateTime(2011, 3, 1)))
chromeData.Add(New MarketShareData(25.6, New DateTime(2011, 4, 1)))
chromeData.Add(New MarketShareData(25.9, New DateTime(2011, 5, 1)))
chromeData.Add(New MarketShareData(27.9, New DateTime(2011, 6, 1)))
chromeData.Add(New MarketShareData(29.4, New DateTime(2011, 7, 1)))
chromeData.Add(New MarketShareData(30.3, New DateTime(2011, 8, 1)))
chromeData.Add(New MarketShareData(30.5, New DateTime(2011, 9, 1)))
chromeData.Add(New MarketShareData(32.3, New DateTime(2011, 10, 1)))
chromeData.Add(New MarketShareData(33.4, New DateTime(2011, 11, 1)))
chromeData.Add(New MarketShareData(34.6, New DateTime(2011, 12, 1)))
Return chromeData
End Function
Public Class MarketShareData
Public Sub New(marketShare2011 As Double, [date] As DateTime)
_date = [date]
_marketShare2011 = marketShare2011
End Sub
Private _date As DateTime
Public Property [Date]() As DateTime
Get
Return _date
End Get
Set(value As DateTime)
_date = value
End Set
End Property
Private _marketShare2011 As Double
Public Property MarketShare2011() As Double
Get
Return _marketShare2011
End Get
Set(value As Double)
_marketShare2011 = value
End Set
End Property
End Class