How can I create bubble chart with XamDataChart? There is bubble chart in XamChart, but it lacks support for zooming.
I suppose I need create something like BubbleSeries derived from ScatterBase. What else I need?
Thx
Its possible to emulate a bubble series with the scatter series by changing the marker template to a custom template which binds against a size on on the item.
Width={Binding Item.Size} Height ={Binding Item.Size}
In such a way you could also cause each bubble to have a different color. This doesn't help you with the legend features that you may expect from a bubble chart though, if for example you wanted a size key or a legend item per point in the series.
Here's how you might approach it:The Xaml:
<UserControl.Resources> <DataTemplate x:Key="bubbleTemplate" > <Ellipse Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{Binding ActualItemBrush}" Stroke="{Binding Series.ActualMarkerOutline}" StrokeThickness="0.5" MinWidth="10" MinHeight="10" Width="{Binding Item.Width}" Height="{Binding Item.Width}"/> </DataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <igChart:XamDataChart x:Name="theChart"> <igChart:XamDataChart.Axes> <igChart:NumericXAxis x:Name="xAxis" MinimumValue="0" MaximumValue="15"/> <igChart:NumericYAxis x:Name="yAxis" MinimumValue="0" MaximumValue="15"/> </igChart:XamDataChart.Axes> <igChart:XamDataChart.Series> <igChart:ScatterSeries x:Name="scatter" MarkerTemplate="{StaticResource bubbleTemplate}" ItemsSource="{Binding}" XMemberPath="XValue" YMemberPath="YValue" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}"/> </igChart:XamDataChart.Series> </igChart:XamDataChart> </Grid>
And the code behind:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.DataContext = new BubbleData(); } } public class BubbleData : ObservableCollection<BubblePoint> { public BubbleData() { this.Add(new BubblePoint() { XValue = 4, YValue = 10, Width = 30 }); this.Add(new BubblePoint() { XValue = 4, YValue = 4, Width = 40 }); this.Add(new BubblePoint() { XValue = 8, YValue = 8, Width = 20 }); this.Add(new BubblePoint() { XValue = 10, YValue = 1, Width = 50 }); this.Add(new BubblePoint() { XValue = 1, YValue = 10, Width = 40 }); } } public class BubblePoint { public double XValue { get; set; } public double YValue { get; set; } public double Width { get; set; } }
Let me know if this helps!
-Graham
Thx for answer Graham.
Your code works, but it lacks some basic stuff - consider such data :
public BubbleData() { this.Add(new BubblePoint() { XValue = -4, YValue = 10, Width = 30 }); this.Add(new BubblePoint() { XValue = -4, YValue = 4, Width = 40 }); this.Add(new BubblePoint() { XValue = 8, YValue = 8, Width = 20 }); this.Add(new BubblePoint() { XValue = -10, YValue = 1, Width = 50 }); this.Add(new BubblePoint() { XValue = 1, YValue = 10, Width = 40000 }); }
You get just one color area, because bubble size is not recalculated according to size of the chart. Nice feature to have will be set minimum and maximum display size of bubble - size of each one in chart will be recalculated with respect to actual data.
I'm also wondering if I can turn on automatic recalculation of axis sizes based on bind data? (I can do it in my code, but I would expect such think from Chart control...)