HtmlChart - Pie chart labels clipped in Chrome

12 posts, 0 answers
  1. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 24 Feb 2014 Link to this post

    I have an HtmlChart (Pie) that displays differently in IE10 and Chrome. In IE10, the labels for the slices on the left extend beyond the chart image while Chrome clips them at the edge of the image. Obviously, this is not something that can easily be handled. Just wanted to let you know about it.

    I have attached relevant images.
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 27 Feb 2014 Link to this post

    Hello Ed,

    Could you send me a sample page, where the issue is reproduced? As we are unaware of such a problem, this will allow me to investigate the case and give you a suggestion for a workaround.

    Regards,
    Stamo Gochev
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 28 Feb 2014 Link to this post

    Here is a  sample page. The original width of the charts was 200 less and the height was 100 less.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OneInstallationOneDayPage.aspx.cs" Inherits="EnterpriseWeb.Html.Dashboard.OneInstallationOneDayPage" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
    <%@ Register Assembly="EnterpriseWeb.RoamControls" Namespace="EnterpriseWeb.RoamControls"
     TagPrefix="cc1" %><!DOCTYPE html><html>
    <head runat="server">
     <title></title>
     <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
      <StyleSheets>
       <telerik:StyleSheetReference Path="~/Styles/Common.css" />
       <telerik:StyleSheetReference Path="~/Styles/Dashboard/Dashboard.css" />
       <telerik:StyleSheetReference Path="~/Styles/Dashboard/OneInstallationOneDay.css" />
      </StyleSheets>
     </telerik:RadStyleSheetManager>
    </head>
    <body>
     <div style="width: 100%; height: 100%; overflow-y: auto">
      <form id="OneInstallationOneDayForm" runat="server">
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
         <asp:ScriptReference Path="~/Scripts/Common.js" />
         <asp:ScriptReference Path="~/Scripts/Dashboard/Dashboard.js" />
         <asp:ScriptReference Path="~/Scripts/Dashboard/OneInstallationOneDay.js" />
        </Scripts>
       </telerik:RadScriptManager>
       <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
       <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
       </telerik:RadAjaxManager>
       <telerik:RadSkinManager ID="RadSkinManager1" runat="server" PersistenceMode="Cookie" />
       <asp:Panel ID="MainPanel" runat="server"></asp:Panel>
       <div id="SLMDiv" class="ModuleDiv">
        <div class="Center">
         <h3>Street Light Modules</h3>
        </div>
        <div class="ReportDiv">
         <telerik:RadGrid ID="SLMGrid" runat="server" CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
          Width="300px">
          <MasterTableView>
           <Columns>
            <telerik:GridBoundColumn DataField="InstallationId" DataType="System.Int16" Visible="false" UniqueName="InstallationId" />
            <telerik:GridBoundColumn DataField="ReportDate" DataType="System.DateTime" Visible="false" UniqueName="ReportDate" />
            <telerik:GridBoundColumn DataField="DeviceStatus" HeaderText="Device Status" SortExpression="DeviceStatus" UniqueName="DeviceStatus" />
            <telerik:GridBoundColumn DataField="DeviceCountLink" DataType="System.Int32" HeaderText="Device Count" SortExpression="DeviceCount"
             UniqueName="DeviceCount" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0}" />
           </Columns>
          </MasterTableView>
         </telerik:RadGrid>
        </div>
        <div class="ReportDiv">
         <telerik:RadHtmlChart ID="SLMChart" runat="server" Width="600" Height="500" Transitions="true">
          <Appearance>
           <FillStyle BackgroundColor="White" />
          </Appearance>
          <ChartTitle Text="" />
          <Legend>
           <Appearance BackgroundColor="White" Position="Right" Visible="true" />
          </Legend>
          <PlotArea>
           <Appearance>
            <FillStyle BackgroundColor="White" />
           </Appearance>
          </PlotArea>
         </telerik:RadHtmlChart>
        </div>
       </div>
       <div id="DCMDiv" class="ModuleDiv">
        <div class="Center">
         <h3>Dimmer Control Modules</h3>
        </div>
        <div class="ReportDiv">
         <telerik:RadGrid ID="DCMGrid" runat="server" CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
          Width="300px">
          <MasterTableView>
           <Columns>
            <telerik:GridBoundColumn DataField="InstallationId" DataType="System.Int16" Visible="false" UniqueName="InstallationId" />
            <telerik:GridBoundColumn DataField="ReportDate" DataType="System.DateTime" Visible="false" UniqueName="ReportDate" />
            <telerik:GridBoundColumn DataField="DeviceStatus" HeaderText="Device Status" SortExpression="DeviceStatus" UniqueName="DeviceStatus" />
            <telerik:GridBoundColumn DataField="DeviceCountLink" DataType="System.Int32" HeaderText="Device Count" SortExpression="DeviceCount"
             UniqueName="DeviceCount" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0}" />
           </Columns>
          </MasterTableView>
         </telerik:RadGrid>
        </div>
        <div class="ReportDiv">
         <telerik:RadHtmlChart ID="DCMChart" runat="server" Width="600" Height="500" Transitions="true">
          <Appearance>
           <FillStyle BackgroundColor="White" />
          </Appearance>
          <ChartTitle Text="" />
          <Legend>
           <Appearance BackgroundColor="White" Position="Right" Visible="true" />
          </Legend>
          <PlotArea>
           <Appearance>
            <FillStyle BackgroundColor="White" />
           </Appearance>
          </PlotArea>
         </telerik:RadHtmlChart>
        </div>
       </div>
       <div id="GatewayDiv" class="ModuleDiv">
        <div class="Center">
         <h3>Gateways</h3>
        </div>
        <div class="ReportDiv">
         <telerik:RadGrid ID="GatewayGrid" runat="server" CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
          Width="300px">
          <MasterTableView>
           <Columns>
            <telerik:GridBoundColumn DataField="InstallationId" DataType="System.Int16" Visible="false" UniqueName="InstallationId" />
            <telerik:GridBoundColumn DataField="ReportDate" DataType="System.DateTime" Visible="false" UniqueName="ReportDate" />
            <telerik:GridBoundColumn DataField="DeviceStatus" HeaderText="Device Status" SortExpression="DeviceStatus" UniqueName="DeviceStatus" />
            <telerik:GridBoundColumn DataField="DeviceCountLink" DataType="System.Int32" HeaderText="Device Count" SortExpression="DeviceCount"
             UniqueName="DeviceCount" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0}" />
           </Columns>
          </MasterTableView>
         </telerik:RadGrid>
        </div>
        <div class="ReportDiv">
         <telerik:RadHtmlChart ID="GatewayChart" runat="server" Width="600" Height="500" Transitions="true">
          <Appearance>
           <FillStyle BackgroundColor="White" />
          </Appearance>
          <ChartTitle Text="" />
          <Legend>
           <Appearance BackgroundColor="White" Position="Right" Visible="true" />
          </Legend>
          <PlotArea>
           <Appearance>
            <FillStyle BackgroundColor="White" />
           </Appearance>
          </PlotArea>
         </telerik:RadHtmlChart>
        </div>
       </div>
       <cc1:RoamWindowManager ID="RoamWindowManager1" runat="server" AutoSize="True"
        BackColor="AntiqueWhite" Behavior="Close" Behaviors="Close" EnableShadow="True"
        meta:resourcekey="RoamWindowManager1Resource1" Modal="True" ReloadOnShow="True"
        ShowContentDuringLoad="False" VisibleStatusbar="False">
        <Windows>
         <telerik:RadWindow ID="DashboardDetailWindow" runat="server"
          AutoSizeBehaviors="HeightProportional,WidthProportional"
          meta:resourcekey="DashboardDetailWindowResource1" />
        </Windows>
       </cc1:RoamWindowManager>
      </form>
     </div>
    </body>
    </html>
  5. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 03 Mar 2014 Link to this post

    Having just installed the latest update (Q1 2014) the attached shows what is now being produced. Is there a new setting for making the slice labels show outside the pie?
  6. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 05 Mar 2014 Link to this post

    Hello Ed,

    The sample code from your previous answer uses basic RadHtmlChart declaration and I suppose that you are either databinding the chart or creating the series items programmatically. Could you send me your code behind file, so I can reproduce the problem on my side? If you are databinding the chart, could you replace your actual datasource with some hard-coded values, so that I can investigate the issue?

    On your second question - you can check the available options for the label's position (Center, InsideEnd and OutsideEnd) in our demo in the "Sectors Settings" configurator. The OutsideEnd value might be applicable in your case.

    Regards,
    Stamo Gochev
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  7. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 05 Mar 2014 in reply to Stamo Gochev Link to this post

    OutsideEnd is the default setting for the LabelsAppearance. It is having no effect, even when specified. Not sure what else can effect this.
    I will look into getting you some data, but my time is short.
  8. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 06 Mar 2014 Link to this post

    Hello Ed,

    You can use the Margin property in the TextStyle tag in LabelsAppearance of your PieSeries like this:
    <LabelsAppearance>
        <TextStyle Margin="10" />
    </LabelsAppearance>
    This should position the labels even further away from the boundaries of the pie chart. You can find more information about setting the Margin property in our help article.

    If this doesn't work for you, could you modify the attached sample page, so I can reproduce your issue?

    Regards,
    Stamo Gochev
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  9. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 06 Mar 2014 in reply to Stamo Gochev Link to this post

    Since the forum will only allow image files, how am I supposed to attach a project?
  10. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 07 Mar 2014 Link to this post

    Hi Ed,

    You are not allowed to attach a project in a forum thread, but you can either modify my sample code and insert it here as a code snippet here or send us a separate Support ticket, which allows you to attach files.

    Note that your full project might not be necessary, so it will be very helpful if you can isolate the issue in a single page.

    In addition, can you give me more information about the following things:
    1. Can you reproduce the issue with my sample page?
    2. What is the result of applying the Margin property in your project?
    3. Do you have any additional CSS definitions that can affect the chart appearance?
    4. Can you confirm that you are testing your project in IE 10 with Browser Mode: IE10 and Document Mode: Standards? You might have some issues if you are using the Compatibility view instead.

    Regards,
    Stamo Gochev
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  11. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 07 Mar 2014 in reply to Stamo Gochev Link to this post

    1. I never saw a sample page from you.
    2. The margin changed nothing.
    3. I have no CSS entries that would effect this.
    4. Yes, I am using IE10 with IE10 Standards

    Here is my aspx file;
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><!DOCTYPE><html>
    <head runat="server">
     <title></title>
     <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
     <form id="form1" runat="server">
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
       <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
       </Scripts>
      </telerik:RadScriptManager>
      <script type="text/javascript">
      </script>
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
      </telerik:RadAjaxManager>
      <div>
       <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="500" Transitions="true">
        <Appearance>
         <FillStyle BackgroundColor="White" />
        </Appearance>
        <ChartTitle Text="" />
        <Legend>
         <Appearance BackgroundColor="White" Position="Right" Visible="true" />
        </Legend>
        <PlotArea>
         <Appearance>
          <FillStyle BackgroundColor="White" />
         </Appearance>
         <Series>
          <telerik:PieSeries StartAngle="90">
           <LabelsAppearance Position="OutsideEnd" DataFormatString="{0:P3}">
            <TextStyle Margin="10" />
           </LabelsAppearance>
          </telerik:PieSeries>
         </Series>
        </PlotArea>
       </telerik:RadHtmlChart>
      </div>
     </form>
    </body>
    </html>

    And here is my code behind:
    using System;
    using System.Collections.Generic;
    using System.Drawing;
    using System.Linq;
    using Telerik.Web.UI;public partial class Default : System.Web.UI.Page
    {
     protected void Page_Load ( object sender, EventArgs e )
     {
      this.BindData ( this.BuildData () );
     } private void BindData ( IEnumerable<OneInstallationOneDayRow> Items )
     {
      Decimal Sum = Items.Sum ( r => r.DeviceCount );
      PieSeries PS = new PieSeries ();
      PS.StartAngle = 90;
      PS.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.Center;
      PS.LabelsAppearance.DataFormatString = "{0:P2}";
      PS.TooltipsAppearance.DataFormatString = "{0:P2}";  foreach ( OneInstallationOneDayRow Row in Items )
      {
       if ( Row.DeviceCount > 0 )
       {
        PS.Items.Add ( new SeriesItem ()
        {
         BackgroundColor = this.GetColor ( Row.StatusId ),
         Name = Row.DeviceStatus,
         YValue = ( Decimal ) Row.DeviceCount / Sum,
         Exploded = true
        } );
       }
      }  this.RadHtmlChart1.PlotArea.Series.Add ( PS );
     } private List<OneInstallationOneDayRow> BuildData ()
     {
      List<OneInstallationOneDayRow> Entries = new List<OneInstallationOneDayRow> ();  for ( int i = 0; i < 9; i++ )
      {
       Entries.Add ( new OneInstallationOneDayRow ()
       {
        AssetTypeId = 1,
        DeviceCount = i * 10,
        DeviceStatus = this.GetStatus ( i ),
        InstallationId = 4,
        ReportDate = DateTime.Today,
        StatusId = i
       } );
      }  return Entries;
     } private String GetStatus ( Int32 StatusId )
     {
      switch ( StatusId )
      {
       case 2:
        return "Warnings";   case 3:
        return "Fixture Malfunction";   case 4:
        return "No Comm";   case 5:
        return "Extended No Comm";   case 6:
        return "Partial Report";   case 7:
        return "Unregistered";   case 8:
        return "No Power";   default:
        return "Normal";
      }
     } private Color GetColor ( Int32 StatusId )
     {
      switch ( StatusId )
      {
       case 2:
        return Color.Yellow;   case 3:
        return Color.Crimson;   case 4:
        return Color.DarkBlue;   case 5:
        return Color.Red;   case 6:
        return Color.Pink;   case 7:
        return Color.Wheat;   case 8:
        return Color.Turquoise;   default:
        return Color.LightGreen;
      }
     }
    }

    These are not the original files, but they do reproduce the problem on my computer.

  12. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 11 Mar 2014 Link to this post

    Hi Ed,

    Thank you for providing us with a runnable sample.

    Please find my comments and suggestions below:
    • LabelsAppearance.Position property is set twice - in the code behind and in the markup. Therefore the last value set in the code behind will take effect (i.e., PS.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.Center;). 
    • The labels of Pie chart can be positioned through the LabelsAppearance.Position property (i.e. Center, InsideEnd and OutsideEnd) of the series since Q1 2014. If you are not using the latest official version of Telerik UI - 2014.1.225, does upgrading to it fixes the issue with the Position property?
    • It seems that you are using the older SeriesItem collection. I can suggest that you use the corresponding series type (i.e., add PieSeriesItems to the SeriesItems). More information on the matter is available in Introducing the SeriesItems Collection in RadHtmlChart for ASP.NET AJAX blog post.
    • The issue with the overlapping series labels is not reproducible on my side. You can watch the short video test in the attached archive and then tell me if I am missing something. What I can suggest is that you:
      • Set a particular Margin for the PlotArea and compensate it with higher dimensions for the chart. This would let the chart have more space for its labels. Such an example is illustrated in the attached VS example. Note that the Margin property for the PlotArea is added in Q1 2014, so if you are not using this version you must upgrade to it.
      • If your version of Chrome is not the latest official one - 33.0.1750.146 m, does upgrading to it resolve the issue with the overlapping labels in Chrome?


    Regards,
    Danail Vasilev
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  13. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 11 Mar 2014 in reply to Danail Vasilev Link to this post

    Danail,

    You know how it is when you feel really stupid? Expand that!
    I removed the setting on the code-behind for the labels.
    As far as the SeriesItemCollection goes, I has tried it before but couldn't get it to compile. The problem was that it didn't like adding a PieSeriesItem to a PieSeries.Items; even though the interface says it should.

    Thank you for you patience!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017