How to make bubble markers to be automatically scale according to zoom ratio when user performing zoom action for Bubble chart?
Right now, bubble chart doesn't support automatic scaling according to the zoom ratio.
You can always implement your own logic to modify the scale, though. See the "BubbleSmallSize", "BubbleLargeSize", and "BubbleWeightScale" properties of the BubbleSeries.
You can listen for the WindowRectChanged event to know when the zoom level has changed. And the width and height of the window rect indicate what percentage of the entire chart you can see. Note that the zoom does not automatically preserve the aspect ratio of the visible space, so if you scale the bubble sizes differently in x and y they may start to look elliptical. You can enforce a square aspect ratio for the chart by setting the IsSquare property on the chart, however.
-Graham
Graham, I''ll be very much appreciated if you provide sample code that shows how could I apply aspect ratio to marker size transformation.
Sorry for the delay, I've been out of the office for a while. Here is how you could approach this. Please note, though, that the way size scales are handled will be altered somewhat in the RTM version of the bubble chart.The Xaml:
<Window.Resources> <local:TestData x:Key="data" /> </Window.Resources> <Grid> <igChart:XamDataChart x:Name="theChart" IsSquare="True" VerticalZoomable="True" HorizontalZoomable="True" WindowRectChanged="theChart_WindowRectChanged"> <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:BubbleSeries BubbleSmallSize="30" BubbleLargeSize="50" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" XMemberPath="X" YMemberPath="Y" RadiusMemberPath="Radius" ItemsSource="{StaticResource data}" /> </igChart:XamDataChart.Series> </igChart:XamDataChart> </Grid>
And the code behind:
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void theChart_WindowRectChanged(object sender, Infragistics.RectChangedEventArgs e) { var r = e.NewRect; var bubble = theChart.Series[0] as BubbleSeries; bubble.BubbleSmallSize = 30 / e.NewRect.Width; bubble.BubbleLargeSize = 50 / e.NewRect.Width; } } public class TestData : ObservableCollection<TestDataItem> { public TestData() { Add( new TestDataItem { X = 1, Y = 1, Radius = 1 }); Add( new TestDataItem { X = 2, Y = 2, Radius = 2 }); Add( new TestDataItem { X = 3, Y = 3, Radius = 3 }); Add( new TestDataItem { X = 4, Y = 4, Radius = 4 }); Add( new TestDataItem { X = 5, Y = 5, Radius = 5 }); Add( new TestDataItem { X = 6, Y = 6, Radius = 6 }); } } public class TestDataItem { public double X { get; set; } public double Y { get; set; } public double Radius { get; set; } }
Hope this helps!-Graham