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

3 posts, 0 answers
  1. Lorenzo Righini
    Lorenzo Righini avatar
    2 posts
    Member since:
    Nov 2007

    Posted 15 Apr 2014 Link to this post

    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>



  2. Lorenzo Righini
    Lorenzo Righini avatar
    2 posts
    Member since:
    Nov 2007

    Posted 16 Apr 2014 in reply to Lorenzo Righini Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 17 Apr 2014 Link to this post

    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


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top