This is a migrated thread and some comments may be shown as answers.

LabelsAppearance.DataFormatString Globalization

6 Answers 915 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 20 Dec 2012, 12:01 PM

RadHtmlChart-ColumnSeries-localization.zip

Hi,

We are currently working on allowing RadHtmlChart to use Kendo chart localizations and therefore in order to set a certain culture one should follow the steps that Kendo offers here. Said shortly:

Add a reference in your page to the certain culture file (you can find Kendo Culture files in "js/cultures" folder located in the default Kendo folder. You can download KendoUI from here):

<script type="text/javascript" src="kendo.culture.es-ES.min.js"></script>

Declare the culture you want to use to the Kendo object. Note that both script reference and the below function call should be below the RadHtmlCharts on the page:

<script type="text/javascript">

kendo.culture("es-ES");

</script>

Apply the desired numeric format in the DataFormatString property:

<LabelsAppearance DataFormatString="C"></LabelsAppearance>

I have created a sample VS project in the archive "RadHtmlChart_ColumnSeries_localization.zip" which also includes the js file related to the ES culture. Note that the declaration of the reference to the culture file along with the culture setting of the kendo object is put on the bottom of the page. This order is a must for the proper localization of the chart. Note also that the DataFormatString is set to "C" for currency, "N" for numeric, etc. If you apply however {0:C} or {0:N} syntax this will format your numbers without the culture format. This is so because of the Kendo implementation of the cultures requires using the Kendo format strings.

This functionality is still under development and this is why it is not included in the official documentation. If you notice issues with it do let us know.

Regards,
Danail Vasilev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 31 Oct 2013, 10:14 AM

RadHtmlChart-localization-test.zip

Hi Phil,

The reason why the RadHtmlChart control uses additional scripts files from KendoUI framework for localization is that the RadHtmlChart is actually an ASP.NET control wrapper around the Kendo UI Chart. Currently our developers are considering the possibility of embedding these scripts files into the control, so that the chart can be localized independently, however, I cannot bound to any time estimates when this can be done.

Regarding the issue you are experiencing I have tried to reproduce it with the VS example from my previous post but to no avail. Could you please watch the short video attached, and then tell me what I am missing? Could you also confirm which is the version of RadControls and the KendoUI's localization files you are testing with?

Regards,
Danail Vasilev
Telerik

answered on 08 Nov 2013, 12:09 PM

I added the js file manually, and I now get currency formatted numbers.

The lack of any ability to further format makes this pretty useless anyway. I don't wany to display £1,433,123.01. Who cares about 1p on a chart when you are dealing in millions?

Sorry, this is not even half baked yet.

Instead I am assigning a DataFormatString in code behind. I have a checkbox which toggles if the charts show counts or values, and I assign the DataFormat String accordingly, e.g.

Public Sub ShowChart()

Trace.Write("ShowChart")

Dim plt As Telerik.Charting.Palette

plt = Telerik.Charting.PalettesCollection.GetPalette(Master.ddlPalette.SelectedValue)

If dt Is Nothing Then

Else

If Master.ShowGrid Then

rg1.DataSource = dt

rg1.DataBind()

rc1.Visible = False

rc2.Visible = False

rc3.Visible = False

rg1.Visible = True

Else

rc1.Visible = True

rc2.Visible = True

rc3.Visible = True

rg1.Visible = False

rc1.DataSource = dt

rc1.DataBind()

With rc1.PlotArea.YAxis

If Master.chkByValue.Checked Then

.MaxValue = 1200000

.Step = 100000

.LabelsAppearance.DataFormatString = "£{0:N0}"

Else

.MaxValue = 500

.Step = 50

.LabelsAppearance.DataFormatString = "{0:N0}"

End If

' reset chart axis upper limit based on actual data values

.MaxValue = (((Int(maxvalue)) / .Step) * .Step) + (.Step * 0.2)

End With

Dim colorindex As Integer = 2

For Each chtseries As ColumnSeries In rc1.PlotArea.Series

' vary colours

Try

chtseries.Appearance.FillStyle.BackgroundColor = plt.Items(colorindex).MainColor

chtseries.TooltipsAppearance.BackgroundColor = plt.Items(colorindex).MainColor

Catch

chtseries.Appearance.FillStyle.BackgroundColor = plt.Items(0).MainColor

chtseries.TooltipsAppearance.BackgroundColor = plt.Items(0).MainColor

End Try

colorindex += 1

If colorindex = plt.Items.Count Then colorindex = 0

' optionally show labels

chtseries.LabelsAppearance.Position = HtmlChart.BarColumnLabelsPosition.InsideEnd

If Master.chkLabels.Checked Then

chtseries.LabelsAppearance.ClientTemplate = ""

Else

chtseries.LabelsAppearance.ClientTemplate = " "

End If

' show either count or value

If Master.chkByValue.Checked Then

chtseries.LabelsAppearance.DataFormatString = "£{0:N0} " & chtseries.Name

chtseries.TooltipsAppearance.DataFormatString = "£{0:N0} " & chtseries.Name

Else

chtseries.LabelsAppearance.DataFormatString = "{0:N0} " & chtseries.Name

chtseries.TooltipsAppearance.DataFormatString = "{0:N0} " & chtseries.Name

End If

Next

' total pie charts

For pie As Int16 = 0 To 1

Dim pieslices As PieSeries

Dim dtPie As DataView

If pie = 0 Then

pieslices = rc2.PlotArea.Series(0)

dtPie = dt2.AsDataView

Else

pieslices = rc3.PlotArea.Series(0)

dtPie = dt.AsDataView

End If

pieslices.SeriesItems.Clear()

' optionally show labels

If Master.chkLabels.Checked Then

pieslices.LabelsAppearance.ClientTemplate = ""

pieslices.LabelsAppearance.Position = HtmlChart.PieLabelsPosition.Circle

If Master.chkByValue.Checked Then

pieslices.LabelsAppearance.DataFormatString = "£{0:N0}"

Else

pieslices.LabelsAppearance.DataFormatString = "{0:N0}"

End If

Else

pieslices.LabelsAppearance.Position = HtmlChart.PieLabelsPosition.Column

pieslices.LabelsAppearance.ClientTemplate = " " ' make it go away

End If

' show counts or values

If Master.chkByValue.Checked Then

pieslices.TooltipsAppearance.DataFormatString = "£{0:N0}"

Else

pieslices.TooltipsAppearance.DataFormatString = "{0:N0}"

End If

' add items back in varying colours

colorindex = 2

For Each dr As DataRow In dtPie.Table.Rows

Try

Dim pieslice As New PieSeriesItem(CInt(dr("Total")), plt.Items(colorindex).MainColor, dr(pieslices.Name))

pieslices.SeriesItems.Add(pieslice)

Catch

Dim pieslice As New PieSeriesItem(CInt(dr("Total")), plt.Items(0).MainColor, dr(pieslices.Name))

pieslices.SeriesItems.Add(pieslice)

End Try

colorindex += 1

If colorindex = plt.Items.Count Then colorindex = 0

Next

End If

Trace.Write("ShowChart end")

End Sub

This also implements varying colours by item for the pie charts (users can select a palette from a dropdown), matching tooltip colours to the series/item, and optionally hiding labels. Note the trick of assigning an ClientTemplate of a single space to effectively hide the labels

I'm happy with the way this works and hope it helps someone else.

answered on 12 Nov 2013, 03:41 PM

Hi Phil,

I am glad you have successfully localized the RadHtmlChart control. You can format numbers in the chart either through the DataFormatString property or if you want to format number in the ClientTemplate element you can use the kendo.format() method. For example:
ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="myYValues">

<LabelsAppearance DataFormatString="{0:C0}">

</LabelsAppearance>

<TooltipsAppearance>

<ClientTemplate>

#=kendo.format(\'{0:C0}\',dataItem.myYValues)#

</ClientTemplate>

</TooltipsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="myXAxisItems">

</XAxis>

<YAxis>

<LabelsAppearance DataFormatString="{0:C0}"></LabelsAppearance>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID");

dt.Columns.Add("myYValues");

dt.Columns.Add("myXAxisItems");

dt.Rows.Add(1, 2520.1234, "Item 1");

dt.Rows.Add(2, 5506.6784, "Item 2");

dt.Rows.Add(3, 6541.9542, "Item 3");

dt.Rows.Add(4, 4982.8421, "Item 4");

return dt;

}

More information on formatting numbers and dates in RadHtmlChart control is available in Formatting Numbers and Formatting Dates help articles.

Regards,
Danail Vasilev
Telerik