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.
Oh, you mean divided like a pie chart! That would certainly look pretty interesting. Technically you could try to do this by creating a custom MarkerTemplate for the bubble series that contained a XamPieChart. It could bind against some data on the original item, which you can access via the Item property from the template. However, if you have a lot of bubbles, you might need a lighter weight pie chart in order to avoid any performance degradation. I'm uncertain if the performance will be satisfactory if you ended up rendering 300 pie charts in the chart, for example.
I may see if I can give you some sort of sample.
-Graham
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:
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!
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.
Hi
How can i get the Label of the Bubble(PieChart),when i clicked on it.
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.