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>
I will try to listen the events, but that goes against my MVVM pattern.
And how do I bind the name of my elements of the GROUPBY ?
Thank you
Do you want a loading splash? Or to hide the chart until there is data? In either case you should just listen to the collectionchanged event on your collection and show the chart or remove the overlaid splash when the data arrives.
You should just be able to point the chart at a legend that you add to the page. Set its legend property. For example, if your legend has a name legend1 then you can do something like this: Legend="{Binding ElementName=legend1}"
I have another 2 little issues,
I am Working with MVVM and when launching, the graph is painted before the data is got from my BBDD, so, it paints nothing even when I add informations to my Observable collection. I have to do a visibility = visible to the chart to paint my information. Any way of synchronizing this to show directly when my observable collection is created and filled?
The second one is about the legend. How can I show a legend with the name of each installation and it's colour? I want to show a legend and a tooltip when the mouse enters in each bar piece.
Thank you very much!!
:D
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