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
Thank you very much!!
:D
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
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}"
Hello Michael,
I believe Rob has already answered this question here:
https://ko.infragistics.com/community/forums/f/ultimate-ui-for-wpf/97084/xamdatachart-stackedcolumnseries-group-by-how-do-we-properly-set-the-tooltip-and-legend
Using the Sample above how do we properly format the Tooltip value?
Currently it is only displaying the value not the name.
Current Tooltip reads: Series Title: 7
Ideally we want: Emission: 7.
Thanks,
Michael
Using the sample above, how to we get the tooltip to provide meaningful text?
<igChart:StackedColumnSeries x:Name="stack"ItemsSource="{StaticResource grouped}" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" AutoGenerateSeries="True" ShowDefaultTooltip="True"></igChart:StackedColumnSeries>
See attached screenshot.
Got it now that I am awake. :-)
<Window x:Class="WpfAppStackedColumnSerie.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfAppStackedColumnSerie" xmlns:igChart="clr-namespace:Infragistics.Controls.Charts;assembly=InfragisticsWPF4.Controls.Charts.XamDataChart.v14.2" xmlns:ig="http://schemas.infragistics.com/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <local:TestEmissionsCollection x:Key="data" /> <ig:GroupBy x:Key="grouped" ItemsSource="{StaticResource data}" GroupMemberPath="Date" KeyMemberPath="Installation" ValueMemberPath="Emission" /> </Window.Resources> <Grid>
Is GroupBy still available for WPF in version 15.1?
What is the namespace for "igChart"?
Snippet: