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
I believe there is an actual bubble chart on the roadmap for XamDataChart (you would have to query product management for more detail), this is just how you might approach one using the scatter series if you have pretty straightforward bubble chart needs. It won't do things like normalize the bubble size or adjust bubble size with the zoom scale of the chart. (By the way you can get the current zoom scale of the chart from XamDataChart.WindowScaleHorizontal and XamDataChart.WindowScaleVertical)
I'm not sure what you mean by color area? You could certainly adjust the bubble sizes such that the maximum width value represented the "maximum bubble size" and the minimum width represented the "minimum bubble size" without too much trouble.
What do you mean by the axis size recalculation? So that it can fit the width of your bubble? The axes adjust to accomodate the data, but they don't have an idea of the width of your bubbles, so wont attempt to accomodate that space automatically. You would have to do this in your code if emulating a bubble chart with the scatter series.
-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...)
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!