Pie chart legend item labels not appearing

Thread is closed for posting
6 posts, 0 answers
  1. James
    James avatar
    8 posts
    Member since:
    Sep 2012

    Posted 03 Sep 2012 Link to this post

    Hi there I am quite new to telerik controls and am trying to get item labels to appear in the legend of my pie chart. Someone recently got fired and I have taken over this piece of work so I am not entirely sure exactly how this code works at the moment. Another problem I have is when the pie slices get to thin the labels for that slice appear away from the correct slice! I've turned on showlabelconnectors as without it its hard to see exactly where some labels belong. I have managed to get each colour of the pie chart listed in the legend but no names appear next to the legend which looks normal as from looking at the code I dont see anything which could possibly show the item names. I've attached an image below of the pie chart. Currently this is what code I have:

    CourseGroupUsagePieChart.Chart.Series.Clear();
                CourseGroupUsagePieChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 270f;
                CourseGroupUsagePieChart.PlotArea.XAxis.AutoScale = true;
                CourseGroupUsagePieChart.CustomPalettes.Add(seriesPalette);
                CourseGroupUsagePieChart.SeriesPalette = "seriesPalette";

    ChartSeries ySeries_Pie = new ChartSeries();
     ySeries_Pie.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;
    ySeries_Pie.Appearance.ShowLabelConnectors = true;

       foreach (TotalReport item in totalReportCourseGroupList)
                {
                    // x-axis
                    CourseGroupUsagePieChart.PlotArea.XAxis.AddItem(String.Format("{0} {1}", item.Name, item.Name));


                    // y-axis
                    ySeries_Pie.AddItem(item.TotalReportSummary.UsageSeconds, item.TotalReportSummary.UsageSeconds.ToString());
                    //series.AddItem(item.TotalReportSummary.UsageSeconds, item.TotalReportSummary.UsageSeconds.ToString());
                }


                CourseGroupUsagePieChart.AutoLayout = true;
                CourseGroupUsagePieChart.AutoTextWrap = true;
                CourseGroupUsagePieChart.AddChartSeries(ySeries_Pie);

    Here is the asp:
    <telerik:RadChart ID="CourseGroupUsagePieChart"  runat="server" Width="700" Height="600" Skin="Vista" IntelligentLabelsEnabled="true" Appearance-LegendDisplayMode="ItemLabels" OnItemDataBound="CourseGroupUsagePieChart_ItemDataBound">
                  
                    <ChartTitle>
                    <TextBlock Text="Course Group Usage - Top 10">
                    </TextBlock>
                </ChartTitle>
                </telerik:RadChart>

    I've crawled through examples and demos of radcharts and cant seem to find my answer :(. Please help it will be greatly appreciated
  2. James
    James avatar
    8 posts
    Member since:
    Sep 2012

    Posted 05 Sep 2012 Link to this post

    Bump
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 05 Sep 2012 Link to this post

    Hi James,

    Please find attached a sample project similar to your scenario demonstrating how to show legend item labels.

    Shortly you first need to register for the ItemDataBound event and set value to the Name property of each item. This value will be displayed in the legend. For example:
    public void ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
        {
            e.SeriesItem.Name = dataSource.Rows[e.SeriesItem.Index]["LegendName column"].ToString();
        }
    Second as I see it is already done in the code provided is setting the series Appearance.LegendDisplayMode to ItemLabels in order to instruct the legend to show labels for each series item.

    Regarding labels connectors, you could try setting the chart's AutoLayout property to true.

    Hope this helps.

    Kind regards,
    Peshito
    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.
  5. James
    James avatar
    8 posts
    Member since:
    Sep 2012

    Posted 05 Sep 2012 Link to this post

    Hi thanks for replying. I have already tried setting autolayout to true which is in the code I provided. I have looked through your example provided and it did not fix my error. Below is the current code of my pie chart:

       CourseGroupUsagePieChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 270f;
                CourseGroupUsagePieChart.PlotArea.XAxis.AutoScale = true;
                CourseGroupUsagePieChart.AutoLayout = true;
                CourseGroupUsagePieChart.CustomPalettes.Add(seriesPalette);
                CourseGroupUsagePieChart.SeriesPalette = "seriesPalette";
                CourseGroupUsagePieChart.Legend.TextBlock.Text = "Seconds";
                CourseGroupUsagePieChart.Legend.TextBlock.Visible = true;
                ChartSeries ySeries_Pie = null;
                ySeries_Pie = new ChartSeries("test", ChartSeriesType.Pie);
                ySeries_Pie.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;
                ySeries_Pie.Appearance.ShowLabelConnectors = true;
                CourseGroupUsagePieChart.Series.Add(ySeries_Pie);
                CourseGroupUsagePieChart.ItemDataBound += new EventHandler<ChartItemDataBoundEventArgs>(CourseGroupUsagePieChart_ItemDataBound);
                foreach (TotalReport item in totalReportCourseGroupList)
                {
                    // x-axis
                    //CourseGroupUsagePieChart.PlotArea.XAxis.AddItem(String.Format("{0} {1}", item.Name, item.Name));


                    // y-axis
                    //First part set the size of each slice, second part sets the slice labels
                    ySeries_Pie.AddItem(item.TotalReportSummary.UsageSeconds, item.TotalReportSummary.UsageSeconds.ToString());
                }
                CourseGroupUsagePieChart.AutoLayout = true;
                CourseGroupUsagePieChart.AutoTextWrap = true;
                CourseGroupUsagePieChart.AddChartSeries(ySeries_Pie);

    AND here is the itemdatabound method:
      protected void CourseGroupUsagePieChart_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
        {
    //I HAVE TRIED BOTH OF THESE AND NEITHER WORK
            // e.SeriesItem.Name = e.SeriesItem.Name = (e.DataItem as DataRowView).Row["Name"].ToString(); 
            e.SeriesItem.Name = e.SeriesItem.Name = (e.DataItem as DataRowView).Row["GroupName"].ToString();
        }

    Also here is the asp code for my radgrid which contains the column of the names which need to be added to the legend:
    <telerik:RadGrid ID="CourseGroupUsageTopTenGrid"  runat="server" Skin="Outlook" ShowStatusBar="true" AutoGenerateColumns="false" EnableLinqExpressions="false" OnGridExporting="CourseGroupUsageTopTenGrid_GridExporting">
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Course Group Name" UniqueName="GroupName" />
                            <telerik:GridBoundColumn DataField="TotalReportSummary.UserCount" HeaderText="Number of Users" UniqueName="NumberOfUsers" />
                            <telerik:GridBoundColumn DataField="TotalReportSummary.CourseCount" HeaderText="Number of Courses" UniqueName="NumberOfCourses" />
                            <telerik:GridBoundColumn DataField="TotalReportSummary.AccessCount" HeaderText="Total Access" UniqueName="TotalAccess" />
                            <telerik:GridCalculatedColumn DataFields="TotalReportSummary.UsageSeconds" HeaderText="Hours of Usage" DataType="System.Decimal" Expression="{0}/360" DataFormatString="{0:###.##}" UniqueName="HoursOfUsage"/>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

    The graph is still appearing exactly the same as the image I provided in the first post. I have crawled through literally all your demos and have searched the internet like a mad man but nothing has seemed to of worked :(

  6. James
    James avatar
    8 posts
    Member since:
    Sep 2012

    Posted 05 Sep 2012 Link to this post

    Right sorted out the reason why the labels were not appearing next to their correct slice. We are testing are system at the moment so we have weird values which wouldnt exist if the system was being properly used, these weird values are way to small so the graph would have to me a huge size to be able to display properly. BUT am stumped with the legend names, also I dont know if you have realize this but all your chart demos have non working legends
  7. James
    James avatar
    8 posts
    Member since:
    Sep 2012

    Posted 07 Sep 2012 Link to this post

    Problem resolved. I had a rad grid which my pie chart was displaying data for and i just extracted the values from the first column of every row from the grid and use that as my legend. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017