Hello,
I am trying to show a StackedColumnSeries which will have in each column the same X number of data to be stacked.
What I want to do is to create dynamically each StackedFragmentSeries depending on the number of the data to be shown. I can't know the quantity because there will be different filters which will allow to pick different information from the database.
In the example below is my attempt to show it by binding the stackedFragmentSeries to an ObservableCollection, but it doesn't show anything. Emissions is the Observable collection with the values catched from the Database and they are Decimals. Any help about this?
<ig:XamDataChart x:Name="xamStackedColumnChart" Legend="{Binding ElementName=xmLegend}" Padding="10" Visibility="Visible" HorizontalZoomable="True" HorizontalZoombarVisibility="Collapsed" VerticalZoomable="True" VerticalZoombarVisibility="Collapsed" > <ig:XamDataChart.Axes> <ig:NumericYAxis x:Name="StackedColumnYAxis" MinimumValue="0" Interval="10000" Label="{}{} T CO2" MaximumValue="250000" LabelSettings="{StaticResource AxisLabelSettings2}"/> <ig:CategoryXAxis x:Name="StackedColumnXAxis" ItemsSource="{Binding ValuesOfExcessVSEmissions}" Label="{}{Date}" /> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:StackedColumnSeries x:Name="StackedColumns" XAxis="{Binding ElementName=StackedColumnXAxis}" YAxis="{Binding ElementName=StackedColumnYAxis}" ItemsSource="{Binding ValuesOfExcessVSEmissions}"> <ig:StackedColumnSeries.Series> <ig:StackedFragmentSeries ValueMemberPath="Emissions" Title="{Binding ValuesOfExcessVSEmissions}"> </ig:StackedFragmentSeries> </ig:StackedColumnSeries.Series> </ig:StackedColumnSeries> </ig:XamDataChart.Series> </ig:XamDataChart>
Hi, could you show an example of you data? Depending on the format of the data, you should be able to use our GroupBy data source and AutoGenerateSeries on the StackedColumnSeries.
-Graham
What do you need exactly?
The idea is to show in each stacked bar the quantity of Emission for each instalation.In the X we will find the date, and in the Y axis we will find the quantity of emissions. ValuesOfExcessVSEmissions = new ObservableCollection<InstalationEmissionDateInformation>(); public class InstalationEmissionDateInformation { #region VARIABLES public string Instalation; public Decimal Emission; public string Date; public Decimal Assignation; #endregion VARIABLES public InstalationEmissionDateInformation(string instalation, Decimal emission, string date, Decimal assignation) { Instalation = instalation; Emission = emission; Date = date; Assignation = assignation; } }
Hi, here's how you could do it:
<UserControl.Resources> <local:TestEmissionsCollection x:Key="data" /> <igChart:GroupBy x:Key="grouped" ItemsSource="{StaticResource data}" GroupMemberPath="Date" KeyMemberPath="Installation" ValueMemberPath="Emission" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <igChart:XamDataChart x:Name="theChart"> <igChart:XamDataChart.Axes> <igChart:CategoryXAxis x:Name="xAxis" ItemsSource="{StaticResource grouped}" Label="{}{Key}"/> <igChart:NumericYAxis x:Name="yAxis" /> </igChart:XamDataChart.Axes> <igChart:XamDataChart.Series> <igChart:StackedColumnSeries x:Name="stack" ItemsSource="{StaticResource grouped}" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" AutoGenerateSeries="True" > </igChart:StackedColumnSeries> </igChart:XamDataChart.Series> </igChart:XamDataChart> </Grid>
And code behind:
public class TestEmissionsCollection : ObservableCollection<InstalationEmissionDateInformation> { public TestEmissionsCollection() { Add(new InstalationEmissionDateInformation("A", 5, "1/1/2012", 1)); Add(new InstalationEmissionDateInformation("B", 2, "1/1/2012", 1)); Add(new InstalationEmissionDateInformation("C", 7, "1/1/2012", 1)); Add(new InstalationEmissionDateInformation("A", 6, "1/2/2012", 1)); Add(new InstalationEmissionDateInformation("B", 3, "1/2/2012", 1)); Add(new InstalationEmissionDateInformation("C", 8, "1/2/2012", 1)); Add(new InstalationEmissionDateInformation("A", 6, "1/3/2012", 1)); Add(new InstalationEmissionDateInformation("B", 3, "1/3/2012", 1)); Add(new InstalationEmissionDateInformation("C", 6, "1/3/2012", 1)); Add(new InstalationEmissionDateInformation("A", 4, "1/4/2012", 1)); Add(new InstalationEmissionDateInformation("B", 3, "1/4/2012", 1)); Add(new InstalationEmissionDateInformation("C", 7, "1/4/2012", 1)); } } public class InstalationEmissionDateInformation { public string Installation { get; set; } public Decimal Emission { get; set; } public string Date { get; set; } public Decimal Assignation { get; set; } public InstalationEmissionDateInformation( string installation, Decimal emission, string date, Decimal assignation) { Installation = installation; Emission = emission; Date = date; Assignation = assignation; } }
Please note that I changed your public fields into properties. This is required, currently.-Graham
Graham, this example worked great but I'm trying to figure out how it will work on a collection of items that have no keys, or if it's possible. We have a similar scenario but our collections have no keys that we can trigger off of. We are needing to see 2 properties stacked and grouped by date but I can't seem to get it to bind properly. For the example above, if the collection were similar to:
public class TestEmissionsCollection : ObservableCollection<InstalationEmissionDateInformation> { public TestEmissionsCollection() { Add(new InstalationEmissionDateInformation(10, 5, "1/1/2012", 1)); Add(new InstalationEmissionDateInformation(4, 2, "1/2/2012", 1)); Add(new InstalationEmissionDateInformation(10, 7, "1/3/2012", 1)); Add(new InstalationEmissionDateInformation(8, 6, "1/4/2012", 1)); Add(new InstalationEmissionDateInformation(5, 3, "1/5/2012", 1)); Add(new InstalationEmissionDateInformation(9, 8, "1/6/2012", 1)); Add(new InstalationEmissionDateInformation(8, 6, "1/7/2012", 1)); Add(new InstalationEmissionDateInformation(5, 3, "1/8/2012", 1)); Add(new InstalationEmissionDateInformation(7, 6, "1/9/2012", 1)); Add(new InstalationEmissionDateInformation(6, 4, "1/10/2012", 1)); Add(new InstalationEmissionDateInformation(5, 3, "1/11/2012", 1)); Add(new InstalationEmissionDateInformation(10, 7, "1/12/2012", 1)); } } public class InstalationEmissionDateInformation { public Decimal FuelInput { get; set; } public Decimal Emission { get; set; } public string Date { get; set; } public Decimal Assignation { get; set; } public InstalationEmissionDateInformation( Decimal fuelinput, Decimal emission, string date, Decimal assignation) { FuelInput = fuelinput; Emission = emission; Date = date; Assignation = assignation; } }
How can we get this to display all 12 dates with StackedColumnSeries where for each date, the FuelInput and Emissions are stacked and displayed by date on the CategoryXAxis or CategoryDateTimeXAxis? TIA
JP
Hello JP,
If you want to use GroupBy, you have to define a Key, but if you don't want to, you can see the sample in the Samples Browser under XamDataChart / Display - Series / Gallery - Category Series where it is shown how to use the StackedColumnSeries.
Hope this helps you.
I noticed that your Date Property is string type, and the CategoryDateTimeXAxis' DateTiemMemeberPath expect a DateTime Property, so I can suggest you change the the type of the Date Property to DateTime.
Hi Stefan,
I guess the problem I'm having is trying to use the CategoryDateTimeXAxis on a collection with no key. I was attempting to use the GroupBy and use the Date as the GroupMemberPath but my collection is similar to what I sent in the previous post. There's no definitive key to the collection. It's basically a collection of objects with 2 value members that i'm attempting to stack and sort by date. I can build perfectly with a CategoryXAxis but as soon as I replace it with a CategoryDateTimeXAxis and use DateTimeMemberPath="Date" from my collection, it fails. Not exactly sure what I'm doing wrong.
TIA,