Geek Answers Handbook

Setting Datapoints in Silverlight Charts

I am working on a silverlight application that retrieves objects from a web service and dynamically populates a diagram (lines) based on the attributes of an object. The problem is that I have too many data points (points) on the lines, and I was wondering if there is a way to delete them.

I used Setter to smooth the visibility of the data, but I lost the automatic tooltip (attribute value) that I received when the data points were visible. Is there a way to return a tooltip without seeing a data point.

Thanks ron

PS: XAML just defines a diagram, everything else is done in cs

+4
source share
2 answers

I had this exact problem a few months ago.

For me, outliners were not originally important. So I decided to go ahead and use LINQ to view the list. Simply submit a .Where clause (...) or use lambdas to select a subset of the list — all N entries or any other entry in the list.

yourSeries.ItemsSource = blah.Where(x => x... /* insert expressions here to filter a little */)

If outliners are important, you may need to write a simple algorithm that slightly filters the look of your list.

Here is some simple code (but not very) that I had to write for the graph. Sorry for not simplifying the code very much, comment if you need details or a data object.

I measured the size of the test assemblies over time and compared this to the build dates / time / and checks.

For this application, I wanted to show changes in the data since I had a lot of redundant points. These were inflection points of interest.

Imagine that you have 800 collections and related data, but actually only 300 interesting data points. This is much less data and improves display.

I will explain the code a bit below.

  private void ParseData(string xml) { XDocument data = XDocument.Parse(xml); _data = new Dictionary<string, List<ControlAssembly>>(); foreach (XElement dataSet in data.Descendants("data")) { string set = dataSet.Attribute("set").Value; long lastSize = 0; int matchingSizeCount = 0; foreach (XElement build in dataSet.Descendants("build")) { ControlAssembly ca = ControlAssembly.Parse(build); if (ca != null) { List<ControlAssembly> list; if (!_data.TryGetValue(set, out list)) { _data[set] = new List<ControlAssembly>(); list = _data[set]; } bool add = true; if (ca.SizeInKilobytes == lastSize) { matchingSizeCount++; if (matchingSizeCount > 1 && !ca.IsKnownReleaseWeek) { // cut down on the displayed data points add = false; } } else { matchingSizeCount = 0; lastSize = ca.SizeInKilobytes; } if (add) { _data[set].Add(ca); } } } } }

_data is my build dataset that I ultimately use to install the series:

  ParseData(SampleData.LargeDataSet); _xapSeries = new Dictionary<string, LineSeries>(); foreach (string assembly in _data.Keys) { LineSeries series = new LineSeries(); series.Title = assembly.Replace(".dll", ""); series.IndependentValueBinding = new Binding("BuildDateTime"); series.DependentValueBinding = new Binding("CompressedSize"); series.MarkerHeight = 12; series.MarkerWidth = 12; series.ItemsSource = _data[assembly].ToList(); _xapSeries[assembly] = series; if (assembly != "Total") { CompressedSizes.Series.Add(series); } }

And finally, if you want to customize DataPoint templates , this can be done, but in my opinion this is not trivial.

You have a lot to do, for example

  • Determining the correct point type (here I use LineDataPoints)
  • Customize your style palette to choose from your point styles that include this custom template.

This is positive if you need to make a lot of adjustments. You could, for example, make the entire data point transparent.

Here is a special template (sorry, very verbose) for the LineDataPoint control (Silverlight Toolkit controls), which has a custom ToolTip binding, the associated color for the point and other properties related to the same data point from the filter above.

I removed visual states from this XAML to clear it

  <ControlTemplate x:Key="CustomLineDataPointTemplate" TargetType="charting:LineDataPoint"> <Grid x:Name="Root" Opacity="0" ToolTipService.ToolTip="{Binding DataPointTooltipText}"> <Ellipse Opacity="0.4" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/> <Ellipse Opacity="0.4" RenderTransformOrigin="0.661,0.321"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.681,0.308"> <GradientStop Color="#00FFFFFF"/> <GradientStop Color="#FF3D3A3A" Offset="1"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse StrokeThickness="2" Stroke="{Binding DataPointBrush}" /> <Ellipse x:Name="SelectionHighlight" Opacity="0" Fill="Red"/> <Ellipse x:Name="MouseOverHighlight" Opacity="0" Fill="White"/> </Grid> </ControlTemplate>

A custom style palette that will use them:

  <datavis:StylePalette x:Key="MyCustomStylePalette"> <!--Blue--> <Style TargetType="charting:LineDataPoint"> <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFB9D6F7"/><GradientStop Color="#FF284B70" Offset="1"/></RadialGradientBrush></Setter.Value></Setter> <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" /> </Style> <!--Red--> <Style TargetType="charting:LineDataPoint"> <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFFBB7B5"/><GradientStop Color="#FF702828" Offset="1"/></RadialGradientBrush></Setter.Value></Setter> <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" /> </Style> <!-- Light Green --> <Style TargetType="Control"> <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFB8C0AC"/><GradientStop Color="#FF5F7143" Offset="1"/></RadialGradientBrush></Setter.Value></Setter> <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" /> </Style> <!-- Yellow --> <Style TargetType="Control"> <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFFDE79C"/><GradientStop Color="#FFF6BC0C" Offset="1"/></RadialGradientBrush></Setter.Value></Setter> <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" /> </Style> <!-- Indigo --> <Style TargetType="Control"> <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFA9A3BD"/><GradientStop Color="#FF382C6C" Offset="1"/></RadialGradientBrush></Setter.Value></Setter> <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" /> </Style> </datavis:StylePalette>

And XAML that binds the style palette:

  <charting:Chart Title="Compressed control sizes over time" StylePalette="{StaticResource MyCustomStylePalette}" x:Name="CompressedSizes" />

Hope this helps.

+2
source

You can either stylize the data points so that they are not so large, and so that you can still have tooltips for all data points, or you can filter your data points to a smaller collection, rather than having tooltips (because you got rid of data points) - you cannot have it in both directions. Maybe you should try a line style graph?

0
source

More articles:


All Articles