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

LabelsAppearance.DataFormatString Globalization

6 Answers 449 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Filupa
Top achievements
Rank 1
Filupa asked on 18 Dec 2012, 03:36 PM

Hi everyone,
I have a problem with formating Y-Axis label, I need to use spanish format for numbers (e.g.: 123.456.789,12)
As you can see in the picture, in the tooltip I can transform the values with javascript function, but i can't use the same metod for Y-Axis Label.

What can I do?



Thanks in advance

6 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 20 Dec 2012, 12:01 PM
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>

<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.
0
Phil
Top achievements
Rank 2
answered on 28 Oct 2013, 01:32 PM
Let me get this right.

I am using RadControls for ASP.NET Ajax.
I have placed a RadHtmlChart on my page, which is a control in the RadControls suite.
To get it to format using the correct culture I have to install a different product - Kendo ?

Why?

 Surely RadControls should work independently.

Furthermore, I have downloaded Kendo (even though I don;t want it) and added the reference as described, but just get an error "'keno' is undefined at runtime. Your instructions don't seem to cover adding this extra Kendo stuff into a preexisting AJAX application.
0
Danail Vasilev
Telerik team
answered on 31 Oct 2013, 10:14 AM
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
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 the blog feed now.
0
Phil
Top achievements
Rank 2
answered on 08 Nov 2013, 09:59 AM
Danail

Appreciate the feedback, thanks.

Yes, if the necessary JavaScript can be embedded in the control this will make things cleaner.

I followed the video, the bit I am missing is, well, Kendo. I donwloaded it but have no idea how to add it to my website. Obviously I am getting errors becsue the referenced js file doesn't exist.

I could create a folder manually and insert the js file if I can find it, but this seems a bit hacky,. Welcome to the world of HTML5/Javascript I guess? I was expecting some thing Kendo in my toolbox to drop onto a page but I don't see anything.
0
Phil
Top achievements
Rank 2
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
 
               Next
 
           End If
 
       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.
0
Danail Vasilev
Telerik team
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
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 the blog feed now.
Tags
Chart (HTML5)
Asked by
Filupa
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Phil
Top achievements
Rank 2
Share this question
or