Hello,
I'm trying to create a XamDataChart that pulls data from the Sample Data feature generated by Expression Blend.
The Sample Data source name is "CustomerSat", the 2 fields that need to be pulled are "CustomerSatNumber" and "Month".
"CustomerSatNumber" field contains a variety of numbers in the following format "97.52" etc..
"Month" field contains a variety of dates in the following format "07/01/12" etc..
I have added the references to my project, but I am having trouble getting the XamDataChart to display any information. Here is what I have so far:
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource CustomerSat}}" > <ig:XamDataChart> <ig:XamDataChart.Axes> <ig:NumericYAxis DataContext="{Binding Collection[0].CustomerSatNumber}" /> <ig:CategoryXAxis DataContext="{Binding Collection[0].Month}" /> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:BarSeries DataContext="{Binding}"> <ig:BarSeries.YAxis> <ig:CategoryYAxis ItemsSource="{Binding Collection}"/> </ig:BarSeries.YAxis> </ig:BarSeries> </ig:XamDataChart.Series> </ig:XamDataChart> </Grid>
Thank you for reading,
Sebastian
Hello Sebastian,
Thank you for your post. I have been looking into it and I have created a sample application for you, that demonstrates how you can bind the data generated by the Expression Blend to XamDataChart.
If you need any further assistance on the matter please do not hesitate to ask.
Sincerely,
Krasimir
Developer Support Engineer
Infragistics
www.infragistics.com/support
It worked, thank you!
I am just checking if you require any further assistance on the matter.
Thank you for your reply. I have been looking into the DataTemplate that you have created and it seems that the reason for the value of CustomerSatNumber to not get displayed, is that the data context of the DataTemplate is not the data object. The DataContext of the DataTemplate is an object of type Infragistics.Controls.Charts.DataContext, which contains information about the series and the data object that corresponds to the data point. In order to get the data object, you can use the Item property of the DataContext class. Here is how you can change the DataTemplate as follows in order to show the value of CustomerSatNumber property I the markers:
<DataTemplate> <Grid Width="40" Height="25" Margin="0" HorizontalAlignment="Center"> <Border CornerRadius="5" Background="Gray" BorderBrush="{Binding Series.ActualMarkerOutline}" BorderThickness="0.5"> <TextBlock Margin="2" Text="{Binding Item.CustomerSatNumber}" Foreground="White" FontSize="12" HorizontalAlignment="Center"/> </Border> </Grid> </DataTemplate>
Also you can read more detailed information regarding the DataContext class here in our documentation: http://help.infragistics.com/Help/NetAdvantage/WPF/2012.1/CLR4.0/html/InfragisticsWPF4.Controls.Charts.XamDataChart.v12.1~Infragistics.Controls.Charts.DataContext_members.html
If you need any further assistance on the matter, please do not hesitate to ask.
Thanks! I have one more question. I am trying to get the MarkerTemplate to display the CustomerSatNumber, but I am having trouble binding the data, what am I doing wrong?
<ig:XamDataChart> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding Collection}" Label="{}{Month}" MajorStroke="#FFD6D6D6" Stroke="#FFD6D6D6"/> <ig:NumericYAxis x:Name="yAxis" MajorStroke="#FFD6D6D6" Stroke="#FFD6D6D6"> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideRight"/> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:ColumnSeries ItemsSource="{Binding Collection}" ValueMemberPath="CustomerSatNumber" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}"> <ig:ColumnSeries.MarkerTemplate> <DataTemplate> <Grid Width="40" Height="25" Margin="0" HorizontalAlignment="Center"> <Border CornerRadius="5" Background="Gray" BorderBrush="{Binding Series.ActualMarkerOutline}" BorderThickness="0.5"> <TextBlock Margin="2" Text="{Binding CustomerSatNumber}" Foreground="White" FontSize="12" HorizontalAlignment="Center" /> </Border> </Grid> </DataTemplate> </ig:ColumnSeries.MarkerTemplate> </ig:ColumnSeries> </ig:XamDataChart.Series> </ig:XamDataChart>
I am very glad that the sample application was helpful for you. If you need any further assistance on the matter please do not hesitate to ask.