Bubble Chart

[giggs]

Hey, great job on the WPF charts, 1 question, how can I highlight a bubble on the bubble chart when the user clicks on a bubble.

 

Thanks

[JuanC]

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

[giggs]

Thank you for your prompt reply.