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
0
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:
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
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.
0
Phil
Top achievements
Rank 2
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.
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
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
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
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.
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
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.
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.
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 SubThis 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
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:
C#:
More information on formatting numbers and dates in RadHtmlChart control is available in Formatting Numbers and Formatting Dates help articles.
Regards,
Danail Vasilev
Telerik
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>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.