Can we generate a bubble chart with bubbles colored in a pie chart fashion.
http://samples.infragistics.com/sldv/RunSamples.aspx?cn=data-chart#/data-chart/bubble-brush-scale
Thanks for the information Graham but this still does not answer my question.
I am not looking for different solid coloured bubbles.
I am looking for bubble chart with a bubble having multiple colours. e.g. 1/4th bubble in red colour, 1/4th bubble in green colour and the remaining part of that bubble in blue colour.
I would caution against displaying this many metrics in one chart, but if you want to do it, have at it! :)
<UserControl.Resources> <local:TestData x:Key="data" /> <DataTemplate x:Name="pieChartMarker"> <Grid> <igChart:XamPieChart ItemsSource="{Binding Item.Breakdown}" LabelMemberPath="Label" ValueMemberPath="Value" LabelsPosition="BestFit"> </igChart:XamPieChart> </Grid> </DataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <igChart:XamDataChart> <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 XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ItemsSource="{StaticResource data}" XMemberPath="X" YMemberPath="Y" RadiusMemberPath="Total" MarkerTemplate="{StaticResource pieChartMarker}" LabelMemberPath="Label" > <igChart:BubbleSeries.RadiusScale> <igChart:SizeScale MinimumValue="70" MaximumValue="100"> </igChart:SizeScale> </igChart:BubbleSeries.RadiusScale> </igChart:BubbleSeries> </igChart:XamDataChart.Series> </igChart:XamDataChart> </Grid>
And code behind:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); //DataContext = new TestData(); } } public class TestData : ObservableCollection<TestDataItem> { public TestData() { Add(new TestDataItem() { Label = "North America", Total = 10, X = 6, Y = 3, Breakdown = new Breakdown() { new BreakDownItem() { Label = "Hats", Value = 3 }, new BreakDownItem() { Label = "Shoes", Value = 5 }, new BreakDownItem() { Label = "Bags", Value = 2 } } }); Add(new TestDataItem() { Label = "South America", Total = 3, X = 9, Y = 4, Breakdown = new Breakdown() { new BreakDownItem() { Label = "Hats", Value = 1 }, new BreakDownItem() { Label = "Shoes", Value = 1 }, new BreakDownItem() { Label = "Bags", Value = 1 } } }); Add(new TestDataItem() { Label = "Europe", Total = 7, X = 3, Y = 8, Breakdown = new Breakdown() { new BreakDownItem() { Label = "Hats", Value = 3 }, new BreakDownItem() { Label = "Shoes", Value = 1 }, new BreakDownItem() { Label = "Bags", Value = 3 } } }); Add(new TestDataItem() { Label = "Australia", Total = 15, X = 6, Y = 7, Breakdown = new Breakdown() { new BreakDownItem() { Label = "Hats", Value = 2 }, new BreakDownItem() { Label = "Shoes", Value = 7 }, new BreakDownItem() { Label = "Bags", Value = 6 } } }); Add(new TestDataItem() { Label = "Africa", Total = 2, X = 10, Y = 11, Breakdown = new Breakdown() { new BreakDownItem() { Label = "Hats", Value = 1 }, new BreakDownItem() { Label = "Shoes", Value = 1 }, new BreakDownItem() { Label = "Bags", Value = 0 } } }); } } public class TestDataItem { public string Label { get; set; } public double Total { get; set; } public double X { get; set; } public double Y { get; set; } public Breakdown Breakdown { get; set; } } public class Breakdown : ObservableCollection<BreakDownItem> { } public class BreakDownItem { public string Label { get; set; } public double Value { get; set; } }
Hope this helps!Here's what it looks like:
-Graham
Hello Graham,
Is there any default feature in bubble series to display some text? Customizing the bubble is an option and the way you explained above, i can use Pie chart and give some label and displaying that text on bubble can also be done. The problem in the second approach is just to display text on bubble i have to use pie chart on bubble series so this can be performance hit. Can you please let me know some better approach to suit my requirement?
Thanks!
Hi,
Sorry, this slipped through the cracks. There is no built in feature. You can customize the marker templates, or you can float controls over the chart. Customizing the marker templates is probably the easier solution.
Hi
How can i get the Label of the Bubble(PieChart),when i clicked on it.
Thanks
Hello,
I can suggest you handle the XamPieChart’s PreviewMouseLeftButtonDown event and add the following code in its handler:
MessageBox.Show((((e.OriginalSource as Path).Parent as Slice).DataContext as BreakDownItem).Label.ToString());
Hope this helps you.