HiI'm looking for an example of binding an observable collection to a Chart in xaml.This is an app i'm playing around with and it supplies its data to the view using the MVVM pattern. For the life of me i cannot find an example of how to do this. Any example i come across has data hard coded into the xaml which i find really annoying - why not use northwind/adventureworks to show these examples?I have a observable collection with products and quantities all i want to do is show the quantities for each product on a chart. This will work if i just bind the itemsource of the chart to the observable collection. but i want to show the product name along the x-axis and also in the legend.Can anyone give me an example?ThanksPaul
if your collection class implements INotifyCollectionChanged, the chart should automatically respond to updates. there isn't any setting to enable this, it's always enabled.
does your collection implement INotifyCollectionChanged?
Hi
I got it working using the Xaml below - your reply pointed me in the right direction - Thanks.
<igCA:XamChart Name="Product_Quantities" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
StartPaletteBrush="Red" Theme="Neon" View3D="False">
<igCA:XamChart.Series>
<igCA:Series DataSource="{Binding Path=ProductQuantitiesData}"
DataMapping="Label = Product; Value = Quantity"
ChartType="Cylinder" DataPointColor="Different" Label="Products">
<igCA:Series.Marker>
<igCA:Marker Foreground="#FFFBFBFB" />
</igCA:Series.Marker>
</igCA:Series>
</igCA:XamChart.Series>
<igCA:XamChart.Caption>
<igCA:Caption FontFamily="Arial" FontSize="20" FontStretch="Expanded"
FontWeight="Bold" Text="{Binding ChartTitle, Mode=TwoWay}" />
</igCA:XamChart.Caption>
</igCA:XamChart>
My problem now is that when my observable collection changes the the chart doesn't update.
Scenario:
I have a date range on the form that allows the user to filter the data that the chart displays within those dates. When the dates are changed the observable collection is updated with the filtered data but this is not reflected in the chart. Is there a setting in the xaml that i need to set so that the chart synchronizes with the observable collection?
Thanks
Paul
here is a simple example of binding a series to an ObservableCollection in XAML.
<igCA:XamChart Name="xamChart1"> <igCA:XamChart.Series> <igCA:Series ChartType="Column" DataMapping="Label=ProductName;Value=Quantity;"> <igCA:Series.DataSource> <local:MyData /> </igCA:Series.DataSource> </igCA:Series> </igCA:XamChart.Series> </igCA:XamChart>
public class MyData : ObservableCollection<Product> { public MyData() : base() { this.Add(new Product() { ProductName = "Product A", Quantity = 1 }); this.Add(new Product() { ProductName = "Product B", Quantity = 2 }); this.Add(new Product() { ProductName = "Product C", Quantity = 3 }); this.Add(new Product() { ProductName = "Product D", Quantity = 4 }); } } public class Product { public string ProductName { get; set; } public int Quantity { get; set; } }