LabelsAppearance.DataFormatString Globalization

7 posts, 0 answers
  1. Filupa
    Filupa avatar
    10 posts
    Member since:
    Nov 2012

    Posted 18 Dec 2012 Link to this post


    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 20 Dec 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 28 Oct 2013 Link to this post

    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.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 31 Oct 2013 Link to this post

    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.
  6. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 08 Nov 2013 Link to this post

    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.
  7. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 08 Nov 2013 Link to this post

    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.
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 12 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017