Suppose data for pie chart like:
Name1 100Name2 200Name3 300Name4 400
how to set this data in code for pie chart? the data could be loaded dynamically. Xaml and code sample please. Document only description for pie chart, no sample code and xaml.
Thanks.
Hello benjaminswitzer ,
I have been looking into your question and I created a small sample for you which demonstrates a possible approach to add the pie series in XamWebChart dynamicly from code and also through xaml. In my sample I have achieved this functionality by assigning a new series for the chart with your test data as follows:
public void GenerateSeriesData()
{
mySeries.Label = "Series 1";
mySeries.ChartType = ChartType.Pie;
for (int i = 1; i < 5; i++)
DataPoint point = new DataPoint();
point.Label = "Name " + i;
point.Value = i*100;
point.Marker=new Marker();
mySeries.DataPoints.Add(point);
}
If you need any further assistance on this matter, please feel free to ask.
Thank you. Another question: How to adjust the legend location and width?
I did same way as you demoed in code, the data is display. but still have problem:
1. I want to the pie chart and legend more closer.
2. the label text for legend is cut off and I can't make it wider.
Here is my xaml for pie chart:
<UserControl.Resources> <Style x:Key="Legend" TargetType="igWebChart:Legend"> <Setter Property="Background" Value="#00000000"/> <Setter Property="BorderBrush" Value="#FFeaeaea"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igWebChart:Legend"> <Border Padding="5,5,5,5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Canvas x:Name="RootElement" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="LegendItem" TargetType="igWebChart:LegendItem"> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="Stroke" Value="#00FFFFFF"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igWebChart:LegendItem"> <Grid x:Name="RootElement"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Rectangle RadiusX="0" RadiusY="0" x:Name="LegendItemIcon" Grid.Column="0" Width="15" Height="15" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" StrokeThickness="0" /> <TextBlock x:Name="LegendItemText" Margin="5,0,0,0" Width="Auto" Height="Auto" Grid.Column="1" Text="{TemplateBinding Text}" Foreground="{TemplateBinding Foreground}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Stroke" Value="#00FFFFFF"/> </Style> <Style x:Key="PieChartSeriesStyle" TargetType="igWebChart:Series"> <Setter Property="Stroke" Value="#00FFFFFF" /> <Setter Property="Marker"> <Setter.Value> <igWebChart:Marker Foreground="#FFFFFFFF"/> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Margin="10,10,10,10" FontSize="14" > My chart here for demo </TextBlock> <igWebChart:XamWebChart x:Name="dataChart" Grid.Row="1" Margin="0,0,0,-1" > <igWebChart:XamWebChart.Scene> <igWebChart:Scene> <igWebChart:Scene.GridArea> <igWebChart:GridArea BorderThickness="0" Background="#00FFFFFF"/> </igWebChart:Scene.GridArea> </igWebChart:Scene> </igWebChart:XamWebChart.Scene> <igWebChart:XamWebChart.Legend> <igWebChart:Legend Visibility="Visible" VerticalAlignment="Top" LegendItemStyle="{StaticResource LegendItem}" Style="{StaticResource Legend}" Height="150" Width="300" Margin="-150,0,0,0" /> </igWebChart:XamWebChart.Legend> <igWebChart:XamWebChart.Series> <igWebChart:Series ChartType="Pie" Label="Membership Types" StrokeThickness="2" Style="{StaticResource PieChartSeriesStyle}" DataMapping = "Value=MemTypeCount;Label=MemTypeName" > <igWebChart:Series.Animation> <igWebChart:Animation/> </igWebChart:Series.Animation> </igWebChart:Series> </igWebChart:XamWebChart.Series> <igWebChart:XamWebChart.Axes> <igWebChart:Axis> <igWebChart:Axis.Stripes> <igWebChart:StripeGroup Stroke="#00ffffff" Fill="#59eaeaea" Unit="5000" Width=".5" /> </igWebChart:Axis.Stripes> <igWebChart:Axis.Label> <igWebChart:LabelGroup Foreground="#FF666666"/> </igWebChart:Axis.Label> <igWebChart:Axis.MajorGridline> <igWebChart:GridlineGroup Stroke="#00eaeaea"/> </igWebChart:Axis.MajorGridline> <igWebChart:Axis.MajorTickMark> <igWebChart:TickMarkGroup StrokeThickness="0"/> </igWebChart:Axis.MajorTickMark> </igWebChart:Axis> <igWebChart:Axis AxisType="PrimaryY" StrokeThickness="0"> <igWebChart:Axis.Label> <igWebChart:LabelGroup Foreground="#FF666666"/> </igWebChart:Axis.Label> <igWebChart:Axis.MajorGridline> <igWebChart:GridlineGroup Stroke="#00eaeaea" StrokeThickness=".5"/> </igWebChart:Axis.MajorGridline> <igWebChart:Axis.MajorTickMark> <igWebChart:TickMarkGroup StrokeThickness="0"/> </igWebChart:Axis.MajorTickMark> </igWebChart:Axis> </igWebChart:XamWebChart.Axes> </igWebChart:XamWebChart> </Grid>
I also want to change color for each slice of pie to gradient color not solid color. As the series loaded by code, how can I do that?
Hello benjaminswitzer,
I was just wondering did you have a chance to try my suggestion. If you still need any assistance on the matter, please do not hesitate to ask.
Thanks for your reply. It looks like maximum length for legend text is 25 chars. How to allow more words in legend text?
Hi,
Can you provide me the sample code for Infragistics pie chart.
Thanks,
Avinash
Hello Avinash,
It has been a while since you have made your post, in case you still need support I will be glad to assist you further. I suppose the other community members can benefit from this answer as well. I have been looking into your post and I can suggest you see these links for our XamPieChart and XamDataChart controls:
http://ko.infragistics.com/products/silverlight/pie-chart/
and
http://ko.infragistics.com/products/silverlight/data-chart/
Hi Stefan
This is the sample code for Silverlight I think. And I am using asp.net 3.5. I am new in development. Could you please provide me the detailed sample application for binding the data in asp.net 3.5? It will be beneficial for me if you help me.
Please note that any questions related to ASP.NET should be directed in the appropriate forum section:
https://ko.infragistics.com/community/forums/f/tags/UltraChart
A live sample illustrating ASP.NET's WebChart as a Pie chart can be found at:
https://ko.infragistics.com/samples/aspnet/chart/pie-charts
You may also be interested in IGNITE UI's DataChart which may also be presented as a pie chart:
https://www.igniteui.com/pie-chart/overview
Please feel free to contact me if you have any questions.