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

pie item labels not showing.

6 Answers 213 Views

Chart (Obsolete)

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

Technology asked on 10 Jan 2011, 02:51 PM

Pie.png

Bars.png

Dear support,

When i use Bars everything is OK (attach image).
When i use Pie, the item labels are not visible (attach image).

Can you please help me to fix this?
Below you will find my design code of the chart.

Thank you in advance for your time.

Best Regards,
George
Navarino Technology Dept.

<telerik:RadChart ID="chCardTypes" runat="server" DefaultType="Pie"

Width="200px" AutoLayout="True" Skin="Inox">

<Series>

<telerik:ChartSeries Name="Series 1" Type="Pie">

<Appearance>

<FillStyle FillType="ComplexGradient" MainColor="211, 185, 123">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="222, 202, 152" />

<telerik:GradientElement Color="211, 185, 123" Position="0.5" />

<telerik:GradientElement Color="183, 154, 84" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<LabelAppearance LabelLocation="Inside">

</LabelAppearance>

<TextAppearance TextProperties-Color="160, 160, 160">

</TextAppearance>

<Border Color="187, 149, 58" />

</Appearance>

</telerik:ChartSeries>

</Series>

<PlotArea>

<XAxis>

<Appearance Color="Transparent">

<MajorGridLines Color="213, 213, 213" />

<TextAppearance TextProperties-Color="17, 17, 17">

</TextAppearance>

</Appearance>

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Color="17, 17, 17">

</Appearance>

</TextBlock>

</AxisLabel>

</XAxis>

<YAxis>

<Appearance Color="Transparent" MinorTick-Width="0">

<MajorGridLines Color="213, 213, 213" PenStyle="Dash" />

<MinorGridLines Color="213, 213, 213" Width="0" />

<TextAppearance TextProperties-Color="17, 17, 17">

</TextAppearance>

</Appearance>

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Color="17, 17, 17">

</Appearance>

</TextBlock>

</AxisLabel>

</YAxis>

<Appearance>

<FillStyle FillType="Solid" MainColor="White">

</FillStyle>

<Border Color="142, 142, 142" />

</Appearance>

</PlotArea>

<Appearance Corners="Round, Round, Round, Round, 10">

<FillStyle FillType="Image">

<FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip">

</FillSettings>

</FillStyle>

<Border Color="111, 111, 111" />

</Appearance>

<ChartTitle>

<Appearance>

<FillStyle MainColor="Transparent">

</FillStyle>

</Appearance>

<TextBlock Text="Card Types">

<Appearance TextProperties-Color="17, 17, 17" TextProperties-Font="Arial, 16pt">

</Appearance>

</TextBlock>

</ChartTitle>

<Legend Visible="False">

<Appearance Position-AlignedPosition="Bottom"

Dimensions-Margins="16%, 3%, 1px, 1px" Visible="False">

<ItemTextAppearance TextProperties-Color="Black">

</ItemTextAppearance>

<FillStyle MainColor="Transparent">

</FillStyle>

<Border Width="0" />

</Appearance>

</Legend>

</telerik:RadChart>

6 Answers, 1 is accepted

answered on 12 Jan 2011, 03:44 PM

Hello,

As I can see from the picture attached Items Labels are shown correctly on both charts. I guess what you can't see is the axes for Pie Chart? Well this is the expected behavior for a Pie chart as it is designed to be used without the axes. For more information you can review our demos with ful source code.

Regards,
Evgenia
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 12 Jan 2011, 04:48 PM

Pie.png

Dear Evgenia,

i have a table with the columns and values below:
CardType       Total
Scratch          695
Virtual           119

How can i show instead of "Item 1" & "Item 2", the values from my column CardType: "Scratch" & "Virtual" (attached image) ???
The total is correct.

Thank you.

Best Regards,
George.
Navarino Technology Dept.

answered on 17 Jan 2011, 08:04 AM

Hello,

You can follow our help topic and set the following properties to gain the needed pie chart:

RadChart1.Series[0].DataYColumn = "QuantityInStock";

RadChart1.Series[0].DataLabelsColumn = "Name";

Have in mind that you should change the DefaultType of the chart to vizualize Pie:

RadChart1.DefaultType = ChartSeriesType.Pie;

Greetings,
Evgenia
the Telerik team

answered on 17 Jan 2011, 10:52 AM

CardTypeColumn.png

OrdersColumn.png

Dear Evgenia thank you for your support.

I'm trying to make it work correctly but i can't. Probably i'm doing something wrong.

Table columns and Values:
CardType       Orders
Scratch            698
Virtual             120

When i use the column "Orders" (chCardTypes.Series(0).DataLabelsColumn = "Orders"), i get the the number of Orders inside the graph (correct) but i also get the same column (incorrect) in Legend items (Attache image "OrdersColumn").

When i use the column "CardType" (chCardTypes.Series(0).DataLabelsColumn = "CardType"), i get the the name of CardTypes in Legend items name (correct), but i also get the same column (incorrect) in Legend items (Attache image "CardTypeColumn").

My code is below.

I want to use the values of column "Orders" inside the graph and the values of column "CardType" in Legend items text, just like the first example Here

Thank you in advance for you help.

Best Regards,
George.
Navarino Technology Dept.

<telerik:RadChart ID="chCardTypes"

runat="server"

Skin="Inox"

SeriesPalette="WebBlue"

Height="250px"

AlternateText="Please Wait"

AutoLayout="True" Width="200px" DefaultType="Pie">

<Series>

<telerik:ChartSeries Name="US Dollars"

Appearance-LabelAppearance-LabelLocation="Inside"

Appearance-LabelAppearance-Position-AlignedPosition="Center"

Type="Pie" >

<Appearance PointDimentions-AutoSize="False"

PointDimentions-Height="10px"

PointDimentions-Width="10px" LegendDisplayMode="ItemLabels">

<FillStyle FillType="ComplexGradient" MainColor="211, 185, 123">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="222, 202, 152" />

<telerik:GradientElement Color="211, 185, 123" Position="0.5" />

<telerik:GradientElement Color="183, 154, 84" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<LabelAppearance LabelLocation="Inside" Position-AlignedPosition="Center"></LabelAppearance>

<TextAppearance TextProperties-Color="DarkBlue"></TextAppearance>

<Border Color="" />

</Appearance>

</telerik:ChartSeries>

</Series>

<PlotArea>

<XAxis>

<Appearance Color="Transparent">

<MajorGridLines Color="213, 213, 213" />

<TextAppearance TextProperties-Color="17, 17, 17">

</TextAppearance>

</Appearance>

<AxisLabel>

<TextBlock Text="">

<Appearance TextProperties-Color="17, 17, 17">

</Appearance>

</TextBlock>

</AxisLabel>

</XAxis>

<YAxis>

<Appearance Color="Transparent" MinorTick-Width="0">

<MajorGridLines Color="213, 213, 213" PenStyle="Dash" />

<MinorGridLines Color="213, 213, 213" Width="0" />

<TextAppearance TextProperties-Color="17, 17, 17"></TextAppearance>

</Appearance>

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Color="17, 17, 17"></Appearance>

</TextBlock>

</AxisLabel>

</YAxis>

<Appearance Dimensions-Margins="5px, 12%, 5px, 10%"

SeriesPalette="WebBlue"

Position-AlignedPosition="Right">

<FillStyle FillType="Solid"

MainColor="White">

</FillStyle>

<Border Color="142, 142, 142" />

</Appearance>

</PlotArea>

<Appearance Corners="Round, Round, Round, Round, 10">

<FillStyle FillType="Image">

<FillSettings BackgroundImage="{chart}"

ImageDrawMode="Flip">

</FillSettings>

</FillStyle>

<Border Color="111, 111, 111" />

</Appearance>

<ClientSettings EnableAxisMarkers="False"

EnableZoom="False" />

<ChartTitle>

<Appearance>

<FillStyle MainColor="Transparent">

</FillStyle>

</Appearance>

<TextBlock Text="Card Types">

<Appearance TextProperties-Color="17, 17, 17"

TextProperties-Font="Arial, 16pt">

</Appearance>

</TextBlock>

</ChartTitle>

<Legend>

<Appearance Dimensions-Margins="16%, 3%, 1px, 1px"

Position-AlignedPosition="Bottom">

<ItemTextAppearance TextProperties-Color="DarkBlue"

Position-AlignedPosition="Top">

</ItemTextAppearance>

<FillStyle MainColor="Transparent">

</FillStyle>

<Border Width="0" />

</Appearance>

</Legend>

</telerik:RadChart>

chCardTypes.Series(0).DataYColumn = "Orders"

chCardTypes.Series(0).DataLabelsColumn = "CardType"

chCardTypes.DataSource = dsOrders.vtblCardTypeReport

chCardTypes.DataBind()

Accepted

answered on 20 Jan 2011, 12:35 PM

Hi,

To vizualize the "Orders" column values as Series Items Labels you don't need to specify DataLabelsColumn as RadChart shows them as labels by default.
To use the values of column "CardType" as Legend items Text you should subscribe to ItemDataBound event of the chart and add the following code line in the event's body:

protected void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)

{

e.SeriesItem.Name = ((DataRowView)e.DataItem)["CardType"].ToString();

}

Also have in mind that you should set the LegendDisplayMode property to ItemLabels to be able to see them:

RadChart1.Series[0].Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;

All the best,
Evgenia
the Telerik team