Jump to content
Software FX Community

Bubble Chart


giggs
 Share

Recommended Posts

Assuming sample data as follows

<XmlDataProvider x:Key="mySampleData" XPath="Products/Product">

<x:XData>

  <Products xmlns="">

  <Product Sales="20" Projected="18" Country="USA"/>

  <Product Sales="12" Projected="16" Country="Japan"/>

  <Product Sales="15" Projected="9" Country="Germany"/>

  <Product Sales="28" Projected="29" Country="Brazil"/>

  </Products>

  </x:XData>

</XmlDataProvider>

You can do this

<cfx:Chart Gallery="Bubble" x:Name="chart1" Grid.Row="1" ClickCommand="{x:Static cfx:Chart.SelectCommand}" ItemsSource="{Binding Source={StaticResource mySampleData}}">

  <cfx:Chart.Series>

  <cfx:SeriesAttributes BindingPath="@Sales"/>

  <cfx:SeriesAttributes BindingPath="@Projected"/>

  </cfx:Chart.Series>

  <cfx:Chart.AllSeries>

  <cfx:AllSeriesAttributes>

  <cfx:AllSeriesAttributes.Template>

  <DataTemplate>

  <Ellipse x:Name="ellipse" Width="{Binding Path=Width}" Height="{Binding Path=Height}" Fill="{Binding Path=Fill}" Stroke="{Binding Path=MarkerStroke}" StrokeThickness="{Binding Path=StrokeThickness}" Opacity="0.5"/>

  <DataTemplate.Triggers>

  <DataTrigger Binding="{Binding Path=Selected}">

  <DataTrigger.Value>

<sys:Boolean>True</sys:Boolean>

  </DataTrigger.Value>

  <Setter Property="Opacity" Value="1" TargetName="ellipse" />

  </DataTrigger>

  </DataTemplate.Triggers>

  </DataTemplate>

  </cfx:AllSeriesAttributes.Template>

  </cfx:AllSeriesAttributes>

  </cfx:Chart.AllSeries>

  <cfx:Chart.Titles>

  <cfx:Title>

  <TextBlock DataContext="{Binding ElementName=chart1, Path=SelectedItem}" Text="{Binding XPath=@Country}" />

  </cfx:Title>

  </cfx:Chart.Titles>

</cfx:Chart>

Note the following

1) Setting the ClickCommand to be the SelectCommand means we will change the selectedItem property of the chart to point to the data item when the user clicks the marker

2) By default our styles do not show Selected items in a different way so we are templating the bubble chart, setting default transparency to 50% and then setting it to 100% when the item is selected. You can also decide to show the bubble with a different Fill/Border/BorderThicknes

3) We are binding the content of the title to be show the country the user is selecting, you could also bind other pieces of your UI, e.g. showing a panel with multiple details about the selected bubble.

4) Because DataItem is a CLR property but our source is XML the textblock binding is "broken" in two as mixing Path and XPath does not seem to work.

 Hope this helps.

JuanC

post-4806-13922409487793_thumb.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...