This is a migrated thread and some comments may be shown as answers.

RadChart Pie Chart Legend Help

3 Answers 162 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 17 May 2012, 03:19 PM
Here is my resulting chart:
http://s15.postimage.org/7y165x8xn/mychart.jpg

The issue that I have is I need the legend to reflect the same color that is in the pie chart, or it will be really hard to know what number goes with each piece of the pie.  I also would love to remove Quantity from the list. 

here is my C#
string[] ParamArgs = { "IdParam|" + HttpContext.Current.Session["Id"], "INParam|" + HttpContext.Current.Session["Current"] };
        ColorPieChart = StoreProcedureDTTable("ColorPieChart_By_Specific", ParamArgs, "ColorPieChart_By_Specific");
        ColorPieChart.ChartTitle.TextBlock.Text = "Quantity by Color";
        ColorPieChart.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.TopRight;
        ColorPieChart.DataSource = ColorPieChart;
        ColorPieChart.PlotArea.XAxis.AxisLabel.Visible = true;
        ColorPieChart.PlotArea.YAxis.AxisLabel.Visible = true;
        
        foreach (DataRow dtRow in ColorPieChart.Rows)
        {
            LabelItem item = new LabelItem();
            item.Name = dtRow["Color"].ToString();
            item.TextBlock.Text = dtRow["Color"].ToString();
            ColorPieChart.Legend.Items.Add(item);

        }
        ColorPieChart.AutoLayout = true;
        ColorPieChart.DataBind();

Here is my aspx:
<telerik:RadChart ID="ColorPieChart" runat="server"
                            ChartImageFormat="Jpeg" DefaultType="Pie" Height="400px" Skin="WebBlue"
                            Width="465px" Appearance-LegendDisplayMode="ItemLabels">
                            <Appearance>
                                <FillStyle MainColor="249, 250, 251">
                                </FillStyle>
                                <Border Color="160, 170, 182" />
                            </Appearance>
                            <Legend>
                                <Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"
                                    Dimensions-Paddings="2px, 8px, 6px, 3px"
                                    Position-AlignedPosition="BottomRight">
                                    <ItemTextAppearance TextProperties-Color="102, 102, 102">
                                    </ItemTextAppearance>
                                    <ItemMarkerAppearance Figure="Triangle">
                                    </ItemMarkerAppearance>
                                    <FillStyle MainColor="216, 222, 227">
                                    </FillStyle>
                                    <Border Color="160, 170, 182" />
                                </Appearance>
                            </Legend>
                            <PlotArea>
                                <EmptySeriesMessage Visible="True">
                                    <Appearance Visible="True">
                                    </Appearance>
                                </EmptySeriesMessage>
                                <XAxis>
                                    <Appearance Color="160, 160, 160">
                                        <MajorGridLines Color="227, 227, 227" Width="0" />
                                        <TextAppearance TextProperties-Color="140, 140, 140">
                                        </TextAppearance>
                                    </Appearance>
                                    <AxisLabel>
                                        <TextBlock>
                                            <Appearance TextProperties-Color="140, 140, 140">
                                            </Appearance>
                                        </TextBlock>
                                    </AxisLabel>
                                </XAxis>
                                <YAxis>
                                    <Appearance Color="160, 160, 160">
                                        <MajorGridLines Color="227, 227, 227" />
                                        <MinorGridLines Color="227, 227, 227" />
                                    </Appearance>
                                    <AxisLabel>
                                        <TextBlock>
                                            <Appearance TextProperties-Color="140, 140, 140">
                                            </Appearance>
                                        </TextBlock>
                                    </AxisLabel>
                                </YAxis>
                                <Appearance>
                                    <FillStyle FillType="Solid" MainColor="">
                                    </FillStyle>
                                </Appearance>
                            </PlotArea>
                            <ChartTitle>
                                <Appearance>
                                    <FillStyle MainColor="">
                                    </FillStyle>
                                </Appearance>
                                <TextBlock Text="Chart by Color Quantity">
                                    <Appearance TextProperties-Color="102, 102, 102"
                                        TextProperties-Font="Arial, 14pt">
                                    </Appearance>
                                </TextBlock>
                            </ChartTitle>
                    </telerik:RadChart>


Any help is appreciated!

3 Answers, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 22 May 2012, 08:37 AM
Hello,

You can check this online example where a scenario like the one that you describe is achieved. I think that you are missing the LegendDisplayMode of the Series:
<Series>
 <telerik:ChartSeries Name="Series 1" Type="Pie" DataYColumn="Sum">
  <Appearance LegendDisplayMode="ItemLabels">

You can try the above instead of the code that you have used:
Appearance-LegendDisplayMode="ItemLabels"

On a side note I want to suggest that you consider a different type of diplay. We generally believe that a pie chart with more than 6 slices is rarely useful. Also in your snapshot I see many variations of green, so even if you show the proper colors in the legend, finding the corresponding color will be very difficult. I suggest you consider using a horizontal bar chart with no legend.

I have attached a project based on your code in which I have made some changes in order to achieve the scenario that you describe. I have added a ChartSeries mapping and I have removed the foreach, which was used to add items to the legend. Please find it attached to this post. I have also included a snapshot of the output that I get when I run the project. 

Kind regards,
Petar Marchev
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
Joshua
Top achievements
Rank 1
answered on 22 May 2012, 02:25 PM
Thinks for the input, but I thought I already have that in my aspx.

<telerik:RadChart ID="ColorPieChart" runat="server"
                            ChartImageFormat="Jpeg" DefaultType="Pie" Height="400px" Skin="WebBlue"
                            Width="465px" Appearance-LegendDisplayMode="ItemLabels">

I also have bolded it in my original post.  Is Appearance-LegendDisplayMode isn't being applied correctly why is that?

Thanks!
0
Petar Marchev
Telerik team
answered on 23 May 2012, 01:07 PM
Hi Joshua,

This seems to be a discrepancy in the RadChart control. Our developers are aware of this and the issue will be looked into. In order to have the ItemLabels display mode you need to use the property that I mentioned in my previous response:
<Series>
 <telerik:ChartSeries Name="Series 1" Type="Pie" DataYColumn="Sum">
  <Appearance LegendDisplayMode="ItemLabels">

We apologize for any caused inconvenienced.

Regards,
Petar Marchev
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.
Tags
Chart (Obsolete)
Asked by
Joshua
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Joshua
Top achievements
Rank 1
Share this question
or