Windows store app/Windows phone 8/XAML/WPF Tutorial: Bubble chart shows different series bubbles with the same size even if the binding value is different

Bubble chart shows different series bubbles with the same size even if the binding value is different

Hi I m experimenting the Silverlight bubble chart because my target is to display a chart having on the Y axis a percentage, in the X axis another percentage and the size of each bubble depending on the number of data used to calculate the X-Y values. So I created a sample bubble chart on Visual Studio 2010 and Silverlight 4 simulating those values. Everything works well except the size of the bubbles which are always the same for each series even if I change the size values. I have two series here simulating data of two different items to get the bubbles colored differently.

Here is my sample code

XAML

<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"   	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  	xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  	xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"  	x:Class="BubbleChart.MainPage"  	Width="640" Height="480">  	<Grid x:Name="LayoutRoot" Background="White">  		<chartingToolkit:Chart Margin="0" Title="Bubble Chart" Foreground="#FFF8F4F4" x:Name="chart">  			<chartingToolkit:Chart.Background>  				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  					<GradientStop Color="Black" Offset="0"/>  					<GradientStop Color="#FF393636" Offset="1"/>  				</LinearGradientBrush>  			</chartingToolkit:Chart.Background>  			<chartingToolkit:Chart.BorderBrush>  				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  					<GradientStop Color="Black" Offset="0"/>  					<GradientStop Color="#FF6A6666" Offset="1"/>  				</LinearGradientBrush>  			</chartingToolkit:Chart.BorderBrush>              <chartingToolkit:BubbleSeries  Title="Series 1" Foreground="#FFFEFBFB" >  				<chartingToolkit:BubbleSeries.Background>  					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  						<GradientStop Color="Black" Offset="0"/>  						<GradientStop Color="#FF6C6A6A" Offset="1"/>  					</LinearGradientBrush>  				</chartingToolkit:BubbleSeries.Background>  			</chartingToolkit:BubbleSeries>              <chartingToolkit:BubbleSeries   				Title="Series 2">  				<chartingToolkit:BubbleSeries.Background>  					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  						<GradientStop Color="Black" Offset="0"/>  						<GradientStop Color="#FF555252" Offset="1"/>  					</LinearGradientBrush>  				</chartingToolkit:BubbleSeries.Background>  			</chartingToolkit:BubbleSeries>  		</chartingToolkit:Chart>  	</Grid>  </UserControl>

using System.Windows.Media.Animation;   using System.Windows.Shapes;   using System.Windows.Controls.DataVisualization.Charting;   using System.Collections.Generic; using System.Windows.Data;   using System.Collections.ObjectModel;   namespace BubbleChart   {     public partial class MainPage : UserControl     {       public MainPage()       {         // Required to initialize variables         InitializeComponent();         Loaded += new RoutedEventHandler(MainPage_Loaded);       }         void MainPage_Loaded(object sender, RoutedEventArgs e)       {         BubbleSeries s1 = chart.Series[0] as BubbleSeries;         BubbleSeries s2 = chart.Series[1] as BubbleSeries;         BubblePoint b1 = new BubblePoint { Value1 = 0.3, Value2 = 1, Size = 3 };         BubblePoint b2 = new BubblePoint { Value1 = 0.5, Value2 = 2, Size = 50 };         List lb1 = new List();         List lb2 = new List();         lb1.Add(b1);         lb2.Add(b2);         s1.ItemsSource = lb1;         s2.ItemsSource = lb2;         s1.IndependentValueBinding = new Binding("Value2");         s1.DependentValueBinding = new Binding("Value1");         s1.SizeValueBinding = new Binding("Size");         s2.IndependentValueBinding = new Binding("Value2");         s2.DependentValueBinding = new Binding("Value1");         s2.SizeValueBinding = new Binding("Size");       }     }       public class BubblePoint     {       public double Value1 { get; set; }       public double Value2 { get; set; }       public int Size { get; set; }     }   }

Is it a bubble chart bug or I m doing something wrong?

Could someone give me a suggestion please?

Thank you

vmax

Answers & Comments...

Answer: 1

I solved the problem by using a single series and coloring each different bubble handling the Loaded event for each drawn bubble. To do that I changed the default style of a bubble data point

<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"  	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  	xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  	xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"  	x:Class="BubbleChart.MainPage"  	Width="640" Height="480">      <UserControl.Resources>          <Style         x:Key="CustomBubbleDataPointStyle"         TargetType="chartingToolkit:BubbleDataPoint" >                <!-- Template with custom ToolTip -->              <Setter Property="Template">                  <Setter.Value>                      <ControlTemplate TargetType="chartingToolkit:BubbleDataPoint">                          <Grid  x:Name="Root" Opacity="0">                              <VisualStateManager.VisualStateGroups>                                  <VisualStateGroup x:Name="CommonStates">                                      <VisualStateGroup.Transitions>                                          <VisualTransition GeneratedDuration="0:0:0.1" />                                      </VisualStateGroup.Transitions>                                      <VisualState x:Name="Normal" />                                      <VisualState x:Name="MouseOver">                                          <Storyboard>                                              <DoubleAnimation Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />                                          </Storyboard>                                      </VisualState>                                  </VisualStateGroup>                                  <VisualStateGroup x:Name="SelectionStates">                                      <VisualStateGroup.Transitions>                                          <VisualTransition GeneratedDuration="0:0:0.1" />                                      </VisualStateGroup.Transitions>                                      <VisualState x:Name="Unselected" />                                      <VisualState x:Name="Selected">                                          <Storyboard>                                              <DoubleAnimation Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />                                          </Storyboard>                                      </VisualState>                                  </VisualStateGroup>                                  <VisualStateGroup x:Name="RevealStates">                                      <VisualStateGroup.Transitions>                                          <VisualTransition GeneratedDuration="0:0:0.5" />                                      </VisualStateGroup.Transitions>                                      <VisualState x:Name="Shown">                                          <Storyboard>                                              <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />                                          </Storyboard>                                      </VisualState>                                      <VisualState x:Name="Hidden">                                          <Storyboard>                                              <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />                                          </Storyboard>                                      </VisualState>                                  </VisualStateGroup>                              </VisualStateManager.VisualStateGroups>                                  <Ellipse Loaded="Ellipse_Loaded"                     Fill="{TemplateBinding Background}"                     Stroke="{TemplateBinding BorderBrush}"                     StrokeThickness="{TemplateBinding BorderThickness}"/>                              <Ellipse>                                  <Ellipse.Fill>                                      <LinearGradientBrush>                                          <GradientStop                                         Color="#77ffffff"                                         Offset="0"/>                                          <GradientStop                                         Color="#00ffffff"                                         Offset="1"/>                                      </LinearGradientBrush>                                  </Ellipse.Fill>                              </Ellipse>                              <ToolTipService.ToolTip>                                  <StackPanel Background="Black">                                      <StackPanel Orientation="Horizontal">                                          <TextBlock Text="Value2: " Foreground="White"/>                                          <ContentControl Content="{TemplateBinding FormattedDependentValue}" Foreground="White"/>                                      </StackPanel>                                      <StackPanel Orientation="Horizontal">                                          <TextBlock Text="Value1: " Foreground="White"/>                                          <ContentControl Content="{TemplateBinding FormattedIndependentValue}" Foreground="White"/>                                      </StackPanel>                                      <StackPanel Orientation="Horizontal">                                          <TextBlock Text="Size: "  Foreground="White"/>                                          <TextBlock Text="{Binding Size}" Foreground="White"/>                                      </StackPanel>                                  </StackPanel>                              </ToolTipService.ToolTip>                          </Grid>                      </ControlTemplate>                  </Setter.Value>              </Setter>          </Style>      </UserControl.Resources>  	<Grid x:Name="LayoutRoot" Background="White">  		<chartingToolkit:Chart Margin="0" Title="Bubble Chart" Foreground="#FFF8F4F4" x:Name="chart">  			<chartingToolkit:Chart.Background>  				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  					<GradientStop Color="Black" Offset="0"/>  					<GradientStop Color="#FF393636" Offset="1"/>  				</LinearGradientBrush>  			</chartingToolkit:Chart.Background>  			<chartingToolkit:Chart.BorderBrush>  				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  					<GradientStop Color="Black" Offset="0"/>  					<GradientStop Color="#FF6A6666" Offset="1"/>  				</LinearGradientBrush>  			</chartingToolkit:Chart.BorderBrush>              <chartingToolkit:BubbleSeries  Title="Series 1" Foreground="#FFFEFBFB" DataPointStyle="{StaticResource CustomBubbleDataPointStyle}">  				<chartingToolkit:BubbleSeries.Background>  					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  						<GradientStop Color="Black" Offset="0"/>  						<GradientStop Color="#FF6C6A6A" Offset="1"/>  					</LinearGradientBrush>  				</chartingToolkit:BubbleSeries.Background>  			</chartingToolkit:BubbleSeries>              <chartingToolkit:BubbleSeries  				Title="Series 2"  DataPointStyle="{StaticResource CustomBubbleDataPointStyle}">  				<chartingToolkit:BubbleSeries.Background>  					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  						<GradientStop Color="Black" Offset="0"/>  						<GradientStop Color="#FF555252" Offset="1"/>  					</LinearGradientBrush>  				</chartingToolkit:BubbleSeries.Background>  			</chartingToolkit:BubbleSeries>  		</chartingToolkit:Chart>  	</Grid>  </UserControl>

using System;  using System.Windows;  using System.Windows.Controls;  using System.Windows.Documents;  using System.Windows.Ink;  using System.Windows.Input;  using System.Windows.Media;  using System.Windows.Media.Animation;  using System.Windows.Shapes;  using System.Windows.Controls.DataVisualization.Charting;  using System.Collections.Generic;  using System.Windows.Data;  using System.Collections.ObjectModel;    namespace BubbleChart  {  	public partial class MainPage : UserControl  	{  		public MainPage()  		{  			// Required to initialize variables  			InitializeComponent();  			Loaded += new RoutedEventHandler(MainPage_Loaded);  		}    		void MainPage_Loaded(object sender, RoutedEventArgs e)  		{  			BubbleSeries s1 = chart.Series[0] as BubbleSeries;  			BubbleSeries s2 = chart.Series[1] as BubbleSeries;    			BubblePoint b1 = new BubblePoint { Index=0, Value1 = 0.03, Value2 = 0.12, Size = 75 };  			BubblePoint b2 = new BubblePoint { Index=1, Value1 = 0.05, Value2 = 0.09, Size = 50 };  			  			List<BubblePoint> lb1 = new List<BubblePoint>();  			  			lb1.Add(b1);  			lb1.Add(b2);  			lb1.Add(new BubblePoint { Index = 2, Value1 = 0.1, Value2 = 0.11, Size = 220 });  			lb1.Add(new BubblePoint { Index = 3, Value1 = 0.1, Value2 = 0.04, Size = 100 });    			s1.ItemsSource = lb1;  			s1.IndependentValueBinding = new Binding("Value2");    			s1.DependentValueBinding = new Binding("Value1");  			s1.SizeValueBinding = new Binding("Size");    		}    		private void Ellipse_Loaded(object sender, RoutedEventArgs e)  		{  			var e1 = (Ellipse)sender;  			switch (((BubblePoint)e1.DataContext).Index)  			{  				case 0:  					e1.Fill = new SolidColorBrush(Colors.Yellow);  					break;  				case 1:  					e1.Fill = new SolidColorBrush(Colors.Brown);  					break;  				case 2:  					e1.Fill = new SolidColorBrush(Colors.Cyan);  					break;  				case 3:  					e1.Fill = new SolidColorBrush(Colors.Green);  					break;  				case 4:  					e1.Fill = new SolidColorBrush(Colors.Gray);  					break;  				default:  					e1.Fill = new SolidColorBrush(Colors.Purple);  					break;  			}  		}  	}    	public class BubblePoint  	{  		public int Index { get; set; }  		public double Value1 { get; set; }  		public double Value2 { get; set; }  		public int Size { get; set; }  	}  }