Scatterplot

Hi,

I'm trying to plot a simple scatter plot and not having any luck. I had one scatter plot of type StringDouble that worked OK, but one that is two double values (I'm using a Point) produces a blank chart. My code is as follows:

Dictionary<string, float> xResults = _model.GetResults(xTestName, out numIgnored);
            Dictionary<string, float> yResults = _model.GetResults(yTestName, out numIgnored);
           ScatterSeries newSeries = new ScatterSeries();
            newSeries.Name = "Test";
            List<Point> points = new List<Point>();
            foreach (KeyValuePair<string, float> unitPair in xResults)
            {
                if (unitPair.Value > -999 && yResults.ContainsKey(unitPair.Key) && yResults[unitPair.Key] > -999)
                {
                    Point newPt = new Point(unitPair.Value, yResults[unitPair.Key]);
                    points.Add(newPt);
                }
            }
            newSeries.ItemsSource = points;
            string color = _generator.NextColor();
            SolidColorBrush newBrush = new SolidColorBrush();
            string tmp = color.Substring(0, 2);
            byte r = byte.Parse(tmp, System.Globalization.NumberStyles.HexNumber);
            tmp = color.Substring(2, 2);
            byte g = byte.Parse(tmp, System.Globalization.NumberStyles.HexNumber);
            tmp = color.Substring(4, 2);
            byte b = byte.Parse(tmp, System.Globalization.NumberStyles.HexNumber);
            newBrush.Color = Color.FromRgb(r, g, b);
            newSeries.SeriesBrush = newBrush;
            View.ScatterPlot.Series.Add(newSeries);
        }
        Title = xTestName + " by " + yTestName;

I know that I have only one datapoint (701, 1.11437) but the chartarea is completely blank (though the axes seem to be fine. The color is red (this part works for my other chart).

The XAML is:

<mindscape:Chart Name="ScatterPlot" ZoomMode="Both" MinWidth="750" VirtualizingPanel.IsVirtualizing="True" SelectionMode="Single" 
                    IsRightClickSelectionEnabled="True" IsChartClipped="False" ToolTip="Draw a rectangle to zoom, use the home key to return to full view" 
                     MouseWheel="scatterPlot_MouseWheel" Title="{Binding Title}" LegendPosition="None">
        <mindscape:Chart.BackgroundElements>
            <mindscape:ChartGrid VerticalGridLineBrush="Transparent">
                <mindscape:ChartGrid.HorizontalStripeBrushes>
                    <SolidColorBrush Color="Transparent" />
                    <SolidColorBrush Color="#DFDFDF" />
                </mindscape:ChartGrid.HorizontalStripeBrushes>
            </mindscape:ChartGrid>
        </mindscape:Chart.BackgroundElements>
    </mindscape:Chart>

I'm really at my wit's end as this seems like it should be a really easy thing to do. I'm also finding the what seems like a lack of documentation to be a serious issue. Am I missing something? The .chm has only a little bit of information that I can find and the sample solution seems to work but seems overly complicated due to the number of charts it's providing. Is there some other documentation or walk through that I am missing. I'm not a WPF expert, but I have done a fair share of it over the past few years.

Hi Jason,

Thanks for contacting us and apologies for the trouble. The chm and samples are all the documentation we provide, which I agree is lacking content.

The scatter series is not handling rendering a single point very well. What I'd recommend here is that you set both the TickLayout and LabelLayout properties to 'Inside' on the XAxis. This can be done by adding the following to your mindscape:chart tag:

<mindscape:Chart.XAxis>
  <mindscape:ChartAxis TickLayout="Inside" LabelLayout="Inside" />
</mindscape:Chart.XAxis>

You could either always have this set, or you could change them depending on if there is only one data point in the items source. I've noted down that this should be something that the control takes care of itself.

Please let me know if you have further questions.

-Jason Fauchelle

Hi Jason,

Thanks for the help here.

I've come across another issue which I cannot figure out for the life of me (and my coworker).

For the scatter plot points, I have bound the ItemSource to a List of PinPlotItem, which is a custom public class with just 4 properties, X, Y, UnitID and IsHighlighted (Boolean). In my SymbolStyleBase, I am able to get the tooltip to show the X, Y and UnitID by just directly binding to them. However, I cannot get the datatrigger to work when IsHighlighted is "True". It is not finding the DataPoint object. What am I doing wrong?

            <Style x:Key="SymbolStyleBase" TargetType="mindscape:DataPoint">
            <Setter Property="Width" Value="10" />
            <Setter Property="Height" Value="10" />
            <Setter Property="Margin" Value="-8,-8,8,8" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="ToolTip">
                <Setter.Value>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Pin: "/>
                            <TextBlock Text="{Binding X}"/>
                            <TextBlock Text=" Value: "/>
                            <TextBlock Text="{Binding Y}"/>
                        </StackPanel>
                        <TextBlock Text="{Binding UnitID}"/>
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="mindscape:DataPoint">
                        <Grid>
                            <Ellipse Name="Shape" Width="8" Height="8" Fill="Transparent"
                                          Stroke="{TemplateBinding Background}" StrokeThickness="0.25"
                                          Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Shape" Property="Fill" Value="Red" />
                                <Setter TargetName="Shape" Property="Stroke" Value="Red" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Shape" Property="Fill" Value="White" />
                                <Setter TargetName="Shape" Property="Stroke" Value="Black" />
                            </Trigger>
                            <DataTrigger Binding="{Binding Path=IsHighlighted, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                                <Setter TargetName="Shape" Property="Stroke" Value="Blue" />
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The error is:

System.Windows.Data Error: 40 : BindingExpression path error: 'IsHighlighted' property not found on 'object' ''ContentPresenter' (Name='')'. BindingExpression:Path=IsHighlighted; DataItem='ContentPresenter' (Name=''); target element is 'ChartSymbol' (Name=''); target property is 'NoTarget' (type 'Object')

Thanks for your help.

Hi Jason,

Thanks for contacting us. You can solve this by removing the RelativeSource of the binding. Here is what you're binding could look like now ("Path=" is optional, so I've left it out):

{Binding IsHighlighted}

When you don't specify a relative source, then the binding will look for properties on the immediate DataContext available to the binding. In this case, the DataContext comes from the DataPoint control, and that DataContext has been set to the raw data value that you've provided the chart (an instance of your custom point class).

When you do provide a relative source of type templated parent, then the binding looks for properties on the object that the template is applied to - in this case a DataPoint object - which is a control in WPF Elements for rendering chart points. The property you want to bind to is not on the DataPoint though, it is on the raw data value that it holds, as mentioned above.

Hope that helps, please let me know if you have further questions about getting this to work and I'll help you out.

-Jason Fauchelle

Hi Jason,

Thanks for the reply.

I had actually tried that originally, but I got the error:

System.Windows.Data Error: 40 : BindingExpression path error: 'IsHighlighted' property not found on 'object' ''LegendItem' (HashCode=66468302)'. BindingExpression:Path=IsHighlighted; DataItem='LegendItem' (HashCode=66468302); target element is 'ChartSymbol' (Name=''); target property is 'NoTarget' (type 'Object')

That's why I tried messing around with the RelativeSource, but didn't get anywhere.

Any ideas?

Hi Jason,

This would be because the style you provide for data points also gets used for rendering the icon in the legend. There is no DataContext for the legend icons, and so this binding error occurs. As long as it is functioning correctly within the chart, then this error can be safely ignored. If you prefer to solve the error however, you can provide a template specific to the legend icon by setting the LegendIconTemplate property of the series. This can be made to resemble the visual style of your points (or anything you want), but doesn't need the tooltip or any interaction bindings.

Let me know if you need further assistance and I'll help out.

-Jason Fauchelle

Hi Jason,

Thanks for the explanation. Unfortunately, it seems instead that I'm unable to update the chart or something along those lines. I have a function which is triggered when the selected DataPoint changes. I do see this being called, but the visuals don't take affect:

private void NewSeries_SelectedDataPointChanged(object sender, SelectedDataPointChangedEventArgs e)
    {
        ScatterSeries thisSeries = (ScatterSeries)sender;
        foreach (KeyValuePair<string, HashSet<PinPlotItem>> points in _pinsPerUnit)
        {
            foreach (PinPlotItem pt in points.Value)
            {
                pt.IsHighlighted = false;
            }
        }
        if (thisSeries.SelectedDataPoint != null)
        {
            PinPlotItem pinItem = (PinPlotItem)thisSeries.SelectedItem;
            string selectedULT = pinItem.UnitID;
            if (_pinsPerUnit.ContainsKey(selectedULT))
            {
                foreach (PinPlotItem pt in _pinsPerUnit[selectedULT])
                {
                    pt.IsHighlighted = true;
                }
            }
        }
        RaisePropertyChangedEvent("ParametricPlot");
    }

_pinsPerUnit is a Dictionary of string to the same PinPlotItem objects that are part of the collection used as the ItemsSource. Is the issue that the chart is not being redrawn (or the style is not updated), or is it that the objects are really not the same as they are copied within the charting framework so changing the values doesn't alter the picture? If they aren't, do you have a good method to select multiple datapoints programmatically based on the one that is currently selected?

Hi Jason,

The objects in your dictionary are certainly the same objects used in the chart control. There are 2 things that I can think of that might be the problem here.

Firstly, make sure the change to the data point template upon highlighting is actually visible. In the example code you sent, you are setting the outline of the circles to be blue - which may be difficult to notice compared the default blue outline color, if that's what you're using. So, make sure the outline color is changing to something noticeably different to the unhighlighted color. Or, set the Fill upon highlighting, rather than the Stroke.

Secondly, make sure that the PinPlotItem.IsHighlighted property raises a property change notification. The binding trigger will be listening for it to perform the change.

I hope one of those solves the issue. Let me know if it's still not working.

-Jason Fauchelle

Hi Jason,

Thanks for your suggestions. The issue was that PinPlotItem.IsHighlighted was not raising a property change notification. Now it's working perfectly!

Thanks again

-Jason

Hi Jason,

I've run into another issue.

I was trying to be slick and speed things up by plotting all of my values in one series rather than 1 series per "unit" because I have hundreds and potentially thousands of these units (with 5-400 x-points possible per unit). With just a few series, the graphing was rough (very slow with even just a few units). However, when I put them all in one series, I believe it only plots one symbol per x-y location. This would normally be OK, but to maintain a concept of series, I am using the IsHighlighted feature above to trigger all of the points that are part of the same unit to change color so users can see all of the points in the unit without separate series. However, what I'm seeing is that since not all pts are plotting, this IsHighlighted is not always working since it may be on an "unplotted" point. I verified that this theory is at least on the right track as the number of DataPoints was ~330 while the number of points in the ItemsSource was over 2000.

Help?

Thanks, Jason

Hi Jason,

This will be because in order to improve performance, each series only renders a sample of the points. WPF struggles to render 2000+ UI controls at once. You saw slow performance with more series because this sampling is done per series.

You can completely disable this sampling behavior by setting the AllowsDataSampling property to false. But with 2000+ points, you can expect it to be sluggish. Another alternative which may work for your scenario is to create a class that extends ScatterSeries and then call the ShowDataPoint method to selectively display some points. You could use this to display all the points that you intend to highlight.

I hope that helps.

-Jason Fauchelle

Hi Jason,

I understand. Can you point me to an example of how I might extend the ScatterSeries in that way?

Thanks, Jason

Hi Jason,

Apologies for the delayed reply, do you still need help with this? We don't have any samples of this, as this feature was recently added for another customer who needed to do something very similar to you. Let me know if you've made some progress and have any questions to help move forward. Or send me a simple project with a chart setup in a similar way to your application and I'll send it back with an example of extending the scatter series.

-Jason Fauchelle