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?