Categorical Labels for Scatter Plot

Hi,

I'm new to WPF Elements and to much WPF Charting in general (decent handle on WPF in general). I am trying to generate a chart with a dynamic number of series where each data point is a categorical x and a numerical y. It seems like a scatter plot is the ideal choice as bar charts will get too cluttered, and the main goal is to look for outliers and the mean value. I am able to plot, but unable to get the X-axis labels to show up. I just see the numbers corresponding to the category (the number I used to create the point). I can't find any documentation regarding doing this. I tried binding the XAxis to an observable collection of strings, and setting the datacontext and the axis directly in the code-behind. Help is much appreciated!

<ms:Chart x:Name="scatterPlot" Title="Kappa Mismatch Rate per Wafer by Indicator/Bin Type" Height="300">
            <ms:Chart.BackgroundElements>
                <ms:ChartGrid VerticalGridLineBrush="Transparent">
                    <ms:ChartGrid.HorizontalStripeBrushes>
                        <SolidColorBrush Color="Transparent" />
                        <SolidColorBrush Color="#EFEFEF" />
                    </ms:ChartGrid.HorizontalStripeBrushes>
                </ms:ChartGrid>
            </ms:Chart.BackgroundElements>
            <ms:Chart.XAxis>
                <ms:ChartAxis Title="Indicator/Bin Type" Style="{StaticResource AxisStyle}" DataContext="{Binding XAxisLabels}" LabelLayout="Inside" TickLayout="Inside"/>
            </ms:Chart.XAxis>
</ms:Chart>

Code-behind:

Dictionary<string, List<double>> series = calculateSeries();
            List<string> keys = series.Keys.ToList();
            double max = 0.0;
            double min = 100.0;
            ChartAxis newY = new ChartAxis();
            ChartAxis newX = new ChartAxis();
            for (int i = 0; i < series.Count; i++)
            {
                ScatterSeries newSeries = new ScatterSeries();
                List<Point> points = new List<Point>();
                for ( int j = 0; j < series[keys[i]].Count; j++)
                {
                    if (series[keys[i]][j] > max)
                    {
                        max = series[keys[i]][j];
                    }
                    if (series[keys[i]][j] < min)
                    {
                        min = series[keys[i]][j];
                    }
                    points.Add(new Point(j, series[keys[i]][j]));
                }
                newSeries.ItemsSource = points;
                Points.Add(points);
                newSeries.Title = "Wafer " + keys[i];
                _view.scatterPlot.Series.Add(newSeries);
            }
            newY.ActualMaximum = max * 1.05;
            newY.ActualMinimum = min * 0.95;
            newY.Title = "Mismatch Rate";
            newY.Style = (Style) _view.FindResource("AxisStyle");
            newY.Height = 150.0;
            _view.scatterPlot.YAxis = newY;

Hi Jason,

Thanks for trying out WPF Elements. To plot categorical data, I recommend using our StringDouble class instead of the Point class. As the name suggests, StringDouble is a tuple containing a string value and a double value. By default, the Chart control will automatically use the string values along the XAxis and create a categorical mapping, and the numbers will be plotted against the Y axis. No need to set the DataContext of the XAxis.

Hope that helps. Please let me know if you have further questions about our chart controls and I'll help you out.

-Jason Fauchelle

Hi Jason,

Thanks for the help, I am almost there… The data is showing up properly, as are the labels. However, the x axis ends exactly where the last value is, cutting off half of the marker symbol. If I bind it to the number of values I have + 0.25, it adds a whole 1 and makes the label “11” (I have 10). It works fine on the left side when I set the minimum to be -0.25. How can get it to be just slightly larger and/or remove that extraneous label.

Thanks, Jason

Hi Jason,

The two best options would be either:

• Set the Chart.IsChartClipped property to false. This will cause data point symbols to overlap out of the chart viewport.

• Set the Padding property of the X-axis to something like 8,0,8,0 This pushes the labels (and hence the plotted data) inward by the number of pixels specified.

Try out both and see which works best for your chart. Hope that helps, let me know if you have further questions.

-Jason Fauchelle

Hi Jason,

Thanks, this worked for my one chart, but now I have an issue with another one:

I often have only one data point per series (though there can be many more). When I plot these datapoints (still the stringdouble type), the X is either on the Y axis and the datapoint invisible, or it's all the way to the right of the graph. I tried with padding to move it, but I don't want to pad it much because I may have 100 points sometimes and don't want them all squished in the center. I have IsChartClipped="False" and Padding="20,0,20,0". I also had to set Minimum of the X-axis to -.25 in order to get it away from the y-axis.

Also, with the same chart, the zooming is not so great. It often zooms in to a semi-random point if using mouse wheel zooming. I'd like to disable it and just allow the viewport drawing. I tried putting a handler on "MouseWheel" on the chart and set e.Handled = true, but that did not do anything to stop the zooming. How can I zoom only with the viewport selection mode.

here is my xaml (as you can see I've added a lot of stuff to try to get this x in the right spot).

<ms:Chart x:Name="scatterPlot" Title="{Binding ChartTitle}" Grid.Column="0" Visibility="{Binding ChartVisibility}"
                ZoomMode="Both" Width="1000" 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"
                    >
                <ms:Chart.BackgroundElements>
                    <ms:ChartGrid VerticalGridLineBrush="Transparent">
                        <ms:ChartGrid.HorizontalStripeBrushes>
                            <SolidColorBrush Color="Transparent" />
                            <SolidColorBrush Color="#DFDFDF" />
                        </ms:ChartGrid.HorizontalStripeBrushes>
                    </ms:ChartGrid>
                </ms:Chart.BackgroundElements>
                <ms:Chart.XAxis>
                    <ms:ChartAxis Title="Wafer" Style="{StaticResource AxisStyle}" TickLayout="Normal" 
                        AllowMajorTickSpacingZoomAdjustment="True" Padding="20,0,20,0" MinimumRange="3" MajorTickSpacing="0.5" HorizontalContentAlignment="Center" Minimum="-0.25"/>
                </ms:Chart.XAxis>
                <ms:Chart.YAxis>
                    <ms:ChartAxis Title="% of Die" MinorTickMarkVisibility="Visible" Style="{StaticResource YAxisStyle}" 
                        Padding="0,8,0,8" LabelFormat="{}{0:0.00%}" MajorTickSpacing="0.10" Maximum="{Binding MaximumY}" Minimum="{Binding MinimumY}"/>
                </ms:Chart.YAxis>
            </ms:Chart>

Hi Jason,

Sorry, I have not been able to reproduce this issue. A single series with a single StringDouble point is displaying the point in the horizontal center. It's possible you may have an older version of WPF Elements. Please try install the latest nightly build for WPF Elements from your account page and see if that helps. If not, please send me a repro project or some code snippets to help me reproduce the problem (I've been using the same C# code you first posted, but changed to have 1 point).

-Jason Fauchelle