Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
285
How create Bubble chart
posted

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

Parents
  • 30692
    Suggested Answer
    Offline posted

    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

Reply Children