I have to switch from Column chart to Pie chart.
Below code does not render any pie chart at all. The issue I think is on the data binding code that I highlighted below.
I am also including the xaml code that has been working with column chart so that you can compare them and tell me what I am doing wrong.
Thank you!
<UserControl.Resources>
<local:ScorecardBusinessLogic x:Key="ScorecardData"/>
</UserControl.Resources>
<Border Background="White" CornerRadius="8" Grid.Row="4" Grid.Column="2" Grid.RowSpan="4" Grid.ColumnSpan="2" BorderThickness="1" Margin="2,5,5,5" BorderBrush="Gray">
<StackPanel >
<Border CornerRadius="2" Opacity="0.8">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#CCffcc00" />
<GradientStop Offset="0.988" Color="#CCFF6700" />
<GradientStop Offset="1" Color="#CCff6600" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Your Overall Work Rating Scorecard for the Past 12 Months" HorizontalAlignment="Center" Margin="1" FontWeight="Bold"/>
</Border>
<igChart:XamWebChart x:Name="xamWebChartScore" >
<igChart:XamWebChart.Series>
<igChart:Series ChartType="Pie" DataSource="{Binding Source={StaticResource ScorecardData}, Path=ScoreCards}" >
<igChart:Series.ChartParameters>
<igChart:ChartParameter Type="Exploded"
Value="True" />
<igChart:ChartParameter Type="ExplodedAnimation">
<igChart:ChartParameter.Value>
<igChart:Animation BeginTime="0:0:0"
Duration="0:0:2.5" />
</igChart:ChartParameter.Value>
</igChart:ChartParameter>
</igChart:Series.ChartParameters>
<igChart:Series.DataPoints>
<igChart:DataPoint Value="{Binding CountA}" Label="Satisfactory" />
<igChart:DataPoint Value="{Binding CountB}" Label="Unsatisfactory Once" />
<igChart:DataPoint Value="{Binding CountC}" Label="Unsatisfactory twice" />
<igChart:DataPoint Value="{Binding CountD}" Label="Unsatisfactory more than twice" />
</igChart:Series.DataPoints>
</igChart:Series>
</igChart:XamWebChart.Series>
</igChart:XamWebChart>
</StackPanel>
Below is the column chart code that render the column chart correctly:
Below is the original bar chart xaml with animation:
<igChart:XamWebChart x:Name="xamWebChartScore" Width="450" Height="280" >
<igChart:XamWebChart.Style>
<Style TargetType="igChart:XamWebChart">
<Setter Property="EndPaletteBrush" Value="#BFEB1C2E" />
<Setter Property="StartPaletteBrush" Value="#BF41C4F3" />
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igChart:XamWebChart">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid
x:Name="RootElement"
Margin="{TemplateBinding Padding}"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
x:Name="CaptionPanel"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0" />
x:Name="ScenePanel"
Grid.Row="1" />
x:Name="LegendPanel"
MaxWidth="200"
Grid.Column="1"
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</igChart:XamWebChart.Style>
<igChart:XamWebChart.Scene>
<igChart:Scene>
<igChart:Scene.GridArea>
<igChart:GridArea BorderThickness="1,1,1,1" BorderBrush="#FFEAEAEA">
<igChart:GridArea.Background>
<RadialGradientBrush
GradientOrigin="0.187,0.242"
Center="0.187,0.242"
RadiusY="0.804"
RadiusX="0.804">
<GradientStop Color="#FFFFFFFF" Offset="0.541" />
<GradientStop Color="#FFFAFAFA" Offset="1" />
</RadialGradientBrush>
</igChart:GridArea.Background>
</igChart:GridArea>
</igChart:Scene.GridArea>
</igChart:Scene>
</igChart:XamWebChart.Scene>
<!-- Data points -->
<igChart:Series ChartType="Column" DataSource="{Binding Source={StaticResource ScorecardData}, Path=ScoreCards}" DataMapping="Value=CountA"
DataPointStyle="{StaticResource ColumnChart}" Animation="{StaticResource DataPointAnimation}" Label="A">
<igChart:Series.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC5F80B" />
<GradientStop Color="#FF6B8901" Offset="1" />
</igChart:Series.Fill>
<igChart:Series DataSource="{Binding Source={StaticResource ScorecardData}, Path=ScoreCards}" DataMapping="Value=CountB" ChartType="Column"
DataPointStyle="{StaticResource ColumnChart}" Animation="{StaticResource DataPointAnimation}" Label="B">
<GradientStop Offset="0" Color="#FF99ffff" />
<GradientStop Offset="1" Color="#FF6dbdd1" />
<igChart:Series DataSource="{Binding Source={StaticResource ScorecardData}, Path=ScoreCards}" DataMapping="Value=CountC" ChartType="Column"
DataPointStyle="{StaticResource ColumnChart}" Animation="{StaticResource DataPointAnimation}" Label="C">
<GradientStop Color="#FFFFA733" />
<GradientStop Color="#FFB25318" Offset="1" />
<igChart:Series DataSource="{Binding Source={StaticResource ScorecardData}, Path=ScoreCards}" DataMapping="Value=CountD" ChartType="Column"
DataPointStyle="{StaticResource ColumnChart}" Animation="{StaticResource DataPointAnimation}" Label="D">
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="Violet" />
<GradientStop Color="DarkViolet" Offset="1.0" />
<igChart:Series DataSource="{Binding Source={StaticResource ScorecardData}, Path=ScoreCards}" DataMapping="Value=CountF" ChartType="Column"
DataPointStyle="{StaticResource ColumnChart}" Animation="{StaticResource DataPointAnimation}" Label="F" >
<GradientStop Color="#FFFF3366" />
<GradientStop Color="#FFB2183E" Offset="1" />
<!--<igChart:Series ChartType="Column" >
<igChart:DataPoint Value="5" Label="A" ToolTip="This is your scorecard for overall job performance. This bar is for 'A' score."/>
<igChart:DataPoint Value="9" Label="B" ToolTip="This is your scorecard for overall job performance. This bar is for 'B' score."/>
<igChart:DataPoint Value="10" Label="C" ToolTip="This is your scorecard for overall job performance. This bar is for 'C' score."/>
<igChart:DataPoint Value="6" Label="D" ToolTip="This is your scorecard for overall job performance. This bar is for 'D' score."/>
<igChart:DataPoint Value="6" Label="F" ToolTip="This is your scorecard for overall job performance. This bar is for 'E' score."/>
<igChart:Series.Animation>
<igChart:Animation BeginTime="00:00:01"
Duration="00:00:03"
AccelerationRatio="0.5"
DecelerationRatio="0.5"
Sequential="True" />
</igChart:Series.Animation>
</igChart:Series>-->
I resolved this issue already. All is working for me now. You can close this ticket.
Can you please provide sample codes of data binding to a pie graph using data returned from WCF service? This way I can compare and tell what I am missing, Thank you!
I got it to work with a different way. I now I have below question.
When I use below xaml, no chart was displayed at all:
<igChart:Series ChartType="Pie" DataSource="{Binding pies}"
However, if I used below xaml then the chart displayed properly:
igChart:Series ChartType="Pie" DataSource="{Binding Source={StaticResource PieChartData}, Path=PieSlices}" DataMapping="Value=Value; Label=Name; ToolTip = Tooltip; " >
Both are bound to the same collection of data. My preferred method is the first one. What changes I need to make in method one for it to work?
<igChart:XamWebChart x:Name="xamWebChartScore" Width="450" Height="280" > <igChart:XamWebChart.Series> <!--<igChart:Series ChartType="Pie" DataSource="{Binding Source={StaticResource PieChartData}, Path=PieSlices}" DataMapping="Value=Value; Label=Name; ToolTip = Tooltip; " >--> <igChart:Series ChartType="Pie" DataSource="{Binding pies}" DataMapping="Value=Value; Label=Name; ToolTip = Tooltip; " > <igChart:Series.ChartParameters> <igChart:ChartParameter Type="Exploded" Value="True" /> <igChart:ChartParameter Type="ExplodedAnimation"> <igChart:ChartParameter.Value> <igChart:Animation BeginTime="0:0:0" Duration="0:0:2.5" /> </igChart:ChartParameter.Value> </igChart:ChartParameter> </igChart:Series.ChartParameters> <igChart:Series.DataPoints> <!--<igChart:DataPoint /> <igChart:DataPoint /> <igChart:DataPoint /> <igChart:DataPoint />--> </igChart:Series.DataPoints> </igChart:Series> </igChart:XamWebChart.Series> </igChart:XamWebChart>
Try setting DataContext instead of data source, I believe this is what you are going for? That being said its possible the DataPoints don't inherit the DataContext. Let me know if it fixes the problem or not. Hope this helps!
-Graham