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 ASP.NET AJAX Chart 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; }
}
}