RadHtmlChart with PolarAreaSeries: issue with binding X-Axis label values

[Lorenzo Righini]

Hi, I'm using Telerik.Web.UI v. 2014.1.403.45
I have a chart in my page to display wind polar data.
The chart is binded to SqlServer data, and the query result data are displayed correctly (i.e. the chart is binded to the data source).
What is not working is the x-axis label data binding: i set the DataLabelsField field to have a textual value displayed, instead of the numeric one, but nothing happens, and the numeric data is not replaced.

                 <telerik:RadHtmlChart ID="radHtmlChart" runat="server" Width="1024px" Height="768px" Transitions="true">
                        <PlotArea>
                            <XAxis StartAngle="90" Reversed="true" Type="Category" Visible="true" DataLabelsField="TXT">
                            </XAxis>
                            <Series>
                                <telerik:PolarAreaSeries Name="WindData" DataAngleField="DEGR" DataRadiusField="NUM">
                                </telerik:PolarAreaSeries>
                            </Series>
                        </PlotArea>
                    </telerik:RadHtmlChart>

[Lorenzo Righini]

Sorry,
now I know that DataLabelsField cannot be used with RadHtmlChart X-Axis.
So the question is: is it possible to change the label, that display degrees (for PolarAreaSeries) , with textual content (for ex. for wind direction, 0° correspond to North direction).

Thanks for the attention
Francesca

[Danail Vasilev]

Hi Francesca,

You can use the following code in order to achieve that:

ASPX:

<script>
    function pageLoad() {
        var chart = $find("<%=PolarAreaChart.ClientID%>");
        chart._chartObject.options.xAxis.labels.template = "#if(value == 0) {# East #} else if (value == 90) {# South #} else if (value == 180) {# West #}  else if (value == 270) {# North #} #";
        chart.repaint();
    }
</script>
<telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="500px" Height="500px" Transitions="true">
    <Legend>
        <Appearance Visible="false"></Appearance>
    </Legend>
    <PlotArea>
        <Series>
            <telerik:PolarAreaSeries Name=">6.2 knots">
                <MarkersAppearance Visible="false" />
                <SeriesItems>
                    <telerik:PolarSeriesItem Angle="125" Radius="1.3"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="138" Radius="3.6"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="152" Radius="4"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="166" Radius="2.2"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="180" Radius="1.3"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="194" Radius="4.5"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="208" Radius="5.8"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="222" Radius="4.6"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="235" Radius="1.1"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="249" Radius="3"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="263" Radius="5.8"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="277" Radius="6.2"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="291" Radius="4.1"></telerik:PolarSeriesItem>
                    <telerik:PolarSeriesItem Angle="305" Radius="0.4"></telerik:PolarSeriesItem>
                </SeriesItems>
            </telerik:PolarAreaSeries>
        </Series>
        <XAxis Step="30"></XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

You may also find useful the following resources:
   - ADD templates for the x-axis in RadHtmlChart

• Overview
• Using ClientTemplates to Display HTML and Execute JavaScript
• Shared Template for ToolTips

Regards,
Danail Vasilev
Telerik