New Plot Type using OxyPlot - wpf

Question

I am attempting to create a new plot type in OxyPlot. I essentally need a StairStepSeries, but with any negative values replaces by their Math.Abs value and when this occurs, the line style to reflect this has happened (by using color and or LineStyle). So, to highlight what I want
To do this, I have created the two classes (I have pasted actual code used below). This is conceptually easy when you know the tools you are working with, which I don't. My problem is directly related to my improper use of rectangle.DrawClippedLineSegments(). I can get a standard StairStepSeries plotting (copying the internal code) but when I attempt to use the rectangle.DrawClippedLineSegments() intuatively I realise I have not got a clue what this method does or how it is supposed to be used, but can't find any documentation. What is rectangle.DrawClippedLineSegments() doing and how should this method be used?
Thanks for your time.
Code:
namespace OxyPlot.Series
{
using System;
using System.Collections.Generic;
using OxyPlot.Series;
/// <summary>
/// Are we reversing positive of negative values?
/// </summary>
public enum ThresholdType { ReflectAbove, ReflectBelow };
/// <summary>
/// Class that renders absolute positive and absolute negative values
/// but changes the line style according to those values that changed sign.
/// The value at which the absolute vaue is taken can be manually set.
/// </summary>
public class AbsoluteStairStepSeries : StairStepSeries
{
/// <summary>
/// The default color used when a value is reversed accross the threshold.
/// </summary>
private OxyColor defaultColorThreshold;
#region Initialization.
/// <summary>
/// Default ctor.
/// </summary>
public AbsoluteStairStepSeries()
{
this.Threshold = 0.0;
this.ThresholdType = OxyPlot.Series.ThresholdType.ReflectAbove;
this.ColorThreshold = this.ActualColor;
this.LineStyleThreshold = OxyPlot.LineStyle.LongDash;
}
#endregion // Initialization.
/// <summary>
/// Sets the default values.
/// </summary>
/// <param name="model">The model.</param>
protected override void SetDefaultValues(PlotModel model)
{
base.SetDefaultValues(model);
if (this.ColorThreshold.IsAutomatic())
this.defaultColorThreshold = model.GetDefaultColor();
if (this.LineStyleThreshold == LineStyle.Automatic)
this.LineStyleThreshold = model.GetDefaultLineStyle();
}
/// <summary>
/// Renders the LineSeries on the specified rendering context.
/// </summary>
/// <param name="rc">The rendering context.</param>
/// <param name="model">The owner plot model.</param>
public override void Render(IRenderContext rc, PlotModel model)
{
if (this.ActualPoints.Count == 0)
return;
// Set defaults.
this.VerifyAxes();
OxyRect clippingRect = this.GetClippingRect();
double[] dashArray = this.ActualDashArray;
double[] verticalLineDashArray = this.VerticalLineStyle.GetDashArray();
LineStyle lineStyle = this.ActualLineStyle;
double verticalStrokeThickness = double.IsNaN(this.VerticalStrokeThickness) ?
this.StrokeThickness : this.VerticalStrokeThickness;
OxyColor actualColor = this.GetSelectableColor(this.ActualColor);
// Perform thresholding on clipping rectangle.
//double threshold = this.YAxis.Transform(this.Threshold);
//switch (ThresholdType)
//{
// // reflect any values below the threshold above the threshold.
// case ThresholdType.ReflectAbove:
// //if (clippingRect.Bottom < threshold)
// clippingRect.Bottom = threshold;
// break;
// case ThresholdType.ReflectBelow:
// break;
// default:
// break;
//}
// Perform the render action.
Action<IList<ScreenPoint>, IList<ScreenPoint>> renderPoints = (lpts, mpts) =>
{
// Clip the line segments with the clipping rectangle.
if (this.StrokeThickness > 0 && lineStyle != LineStyle.None)
{
if (!verticalStrokeThickness.Equals(this.StrokeThickness) ||
this.VerticalLineStyle != lineStyle)
{
// TODO: change to array
List<ScreenPoint> hlptsOk = new List<ScreenPoint>();
List<ScreenPoint> vlptsOk = new List<ScreenPoint>();
List<ScreenPoint> hlptsFlip = new List<ScreenPoint>();
List<ScreenPoint> vlptsFlip = new List<ScreenPoint>();
double threshold = this.YAxis.Transform(this.Threshold);
for (int i = 0; i + 2 < lpts.Count; i += 2)
{
switch (ThresholdType)
{
case ThresholdType.ReflectAbove:
clippingRect.Bottom = threshold;
if (lpts[i].Y < threshold)
hlptsFlip.Add(new ScreenPoint(lpts[i].X, threshold - lpts[i].Y));
else
hlptsOk.Add(lpts[i]);
if (lpts[i + 1].Y < threshold)
{
ScreenPoint tmp = new ScreenPoint(
lpts[i + 1].X, threshold - lpts[i + 1].Y);
hlptsFlip.Add(tmp);
vlptsFlip.Add(tmp);
}
else
{
hlptsOk.Add(lpts[i + 1]);
vlptsOk.Add(lpts[i + 1]);
}
if (lpts[i + 2].Y < threshold)
vlptsFlip.Add(new ScreenPoint(lpts[i + 2].X, threshold - lpts[i + 2].Y));
else
vlptsOk.Add(lpts[i + 2]);
break;
case ThresholdType.ReflectBelow:
break;
default:
break;
}
}
//for (int i = 0; i + 2 < lpts.Count; i += 2)
//{
// hlpts.Add(lpts[i]);
// hlpts.Add(lpts[i + 1]);
// vlpts.Add(lpts[i + 1]);
// vlpts.Add(lpts[i + 2]);
//}
rc.DrawClippedLineSegments(
clippingRect,
hlptsOk,
actualColor,
this.StrokeThickness,
dashArray,
this.LineJoin,
false);
rc.DrawClippedLineSegments(
clippingRect,
hlptsFlip,
OxyColor.FromRgb(255, 0, 0),
this.StrokeThickness,
dashArray,
this.LineJoin,
false);
rc.DrawClippedLineSegments(
clippingRect,
vlptsOk,
actualColor,
verticalStrokeThickness,
verticalLineDashArray,
this.LineJoin,
false);
rc.DrawClippedLineSegments(
clippingRect,
vlptsFlip,
OxyColor.FromRgb(255, 0, 0),
verticalStrokeThickness,
verticalLineDashArray,
this.LineJoin,
false);
}
else
{
rc.DrawClippedLine(
clippingRect,
lpts,
0,
actualColor,
this.StrokeThickness,
dashArray,
this.LineJoin,
false);
}
}
if (this.MarkerType != MarkerType.None)
{
rc.DrawMarkers(
clippingRect,
mpts,
this.MarkerType,
this.MarkerOutline,
new[] { this.MarkerSize },
this.MarkerFill,
this.MarkerStroke,
this.MarkerStrokeThickness);
}
};
// Transform all points to screen coordinates
// Render the line when invalid points occur.
var linePoints = new List<ScreenPoint>();
var markerPoints = new List<ScreenPoint>();
double previousY = double.NaN;
foreach (var point in this.ActualPoints)
{
if (!this.IsValidPoint(point))
{
renderPoints(linePoints, markerPoints);
linePoints.Clear();
markerPoints.Clear();
previousY = double.NaN;
continue;
}
var transformedPoint = this.Transform(point);
if (!double.IsNaN(previousY))
{
// Horizontal line from the previous point to the current x-coordinate
linePoints.Add(new ScreenPoint(transformedPoint.X, previousY));
}
linePoints.Add(transformedPoint);
markerPoints.Add(transformedPoint);
previousY = transformedPoint.Y;
}
renderPoints(linePoints, markerPoints);
if (this.LabelFormatString != null)
{
// Render point labels (not optimized for performance).
this.RenderPointLabels(rc, clippingRect);
}
}
#region Properties.
/// <summary>
/// The value, positive or negative at which any values are reversed
/// accross the threshold.
/// </summary>
public double Threshold { get; set; }
/// <summary>
/// Hold the thresholding type.
/// </summary>
public ThresholdType ThresholdType { get; set; }
/// <summary>
/// Gets or sets the color for the part of the
/// line that is above/below the threshold.
/// </summary>
public OxyColor ColorThreshold { get; set; }
/// <summary>
/// Gets the actual threshold color.
/// </summary>
/// <value>The actual color.</value>
public OxyColor ActualColorThreshold
{
get { return this.ColorThreshold.GetActualColor(this.defaultColorThreshold); }
}
/// <summary>
/// Gets or sets the line style for the part of the
/// line that is above/below the threshold.
/// </summary>
/// <value>The line style.</value>
public LineStyle LineStyleThreshold { get; set; }
/// <summary>
/// Gets the actual line style for the part of the
/// line that is above/below the threshold.
/// </summary>
/// <value>The line style.</value>
public LineStyle ActualLineStyleThreshold
{
get
{
return this.LineStyleThreshold != LineStyle.Automatic ?
this.LineStyleThreshold : LineStyle.Solid;
}
}
#endregion // Properties.
}
}
and the WPF class
namespace OxyPlot.Wpf
{
using System.Windows;
using System.Windows.Media;
using OxyPlot.Series;
/// <summary>
/// The WPF wrapper for OxyPlot.AbsoluteStairStepSeries.
/// </summary>
public class AbsoluteStairStepSeries : StairStepSeries
{
/// <summary>
/// Default ctor.
/// </summary>
public AbsoluteStairStepSeries()
{
this.InternalSeries = new OxyPlot.Series.AbsoluteStairStepSeries();
}
/// <summary>
/// Creates the internal series.
/// </summary>
/// <returns>
/// The internal series.
/// </returns>
public override OxyPlot.Series.Series CreateModel()
{
this.SynchronizeProperties(this.InternalSeries);
return this.InternalSeries;
}
/// <summary>
/// Synchronizes the properties.
/// </summary>
/// <param name="series">The series.</param>
protected override void SynchronizeProperties(OxyPlot.Series.Series series)
{
base.SynchronizeProperties(series);
var s = series as OxyPlot.Series.AbsoluteStairStepSeries;
s.Threshold = this.Threshold;
s.ColorThreshold = this.ColorThreshold.ToOxyColor();
}
/// <summary>
/// Identifies the <see cref="Threshold"/> dependency property.
/// </summary>
public static readonly DependencyProperty ThresholdProperty = DependencyProperty.Register(
"Threshold", typeof(double), typeof(AbsoluteStairStepSeries),
new UIPropertyMetadata(0.0, AppearanceChanged));
/// <summary>
/// Identifies the <see cref="ThresholdType"/> dependency property.
/// </summary>
public static readonly DependencyProperty ThresholdTypeProperty = DependencyProperty.Register(
"ThresholdType", typeof(ThresholdType), typeof(AbsoluteStairStepSeries),
new UIPropertyMetadata(ThresholdType.ReflectAbove, AppearanceChanged));
/// <summary>
/// Identifies the <see cref="ColorThreshold"/> dependency property.
/// </summary>
public static readonly DependencyProperty ColorThresholdProperty = DependencyProperty.Register(
"ColorThreshold", typeof(Color), typeof(AbsoluteStairStepSeries),
new UIPropertyMetadata(Colors.Red, AppearanceChanged));
/// <summary>
/// Identifies the <see cref="LineStyleThreshold"/> dependency property.
/// </summary>
public static readonly DependencyProperty LineStyleThresholdProperty = DependencyProperty.Register(
"LineStyleThreshold", typeof(LineStyle), typeof(AbsoluteStairStepSeries),
new UIPropertyMetadata(LineStyle.LongDash, AppearanceChanged));
/// <summary>
/// Get or set the threshold value.
/// </summary>
public double Threshold
{
get { return (double)GetValue(ThresholdProperty); }
set { SetValue(ThresholdProperty, value); }
}
/// <summary>
/// Get or set the threshold type to be used.
/// </summary>
public ThresholdType ThresholdType
{
get { return (ThresholdType)GetValue(ThresholdTypeProperty); }
set { SetValue(ThresholdTypeProperty, value); }
}
/// <summary>
/// Get or set the threshold color.
/// </summary>
public Color ColorThreshold
{
get { return (Color)GetValue(ColorThresholdProperty); }
set { SetValue(ColorThresholdProperty, value); }
}
/// <summary>
/// Get or set the threshold line style.
/// </summary>
public LineStyle LineStyleThreshold
{
get { return (LineStyle)GetValue(LineStyleThresholdProperty); }
set { SetValue(LineStyleThresholdProperty, value); }
}
}
}

Answer 1

I had a chance to have a look into this, and whilst what I suggest may not be the ideal solution, it should give you some helpful nudges.
Firstly, DrawClippedLineSegments (You can view the source here) and its extension method counterparts (DrawClippedRectangleAsPolygon, DrawClippedEllipse, etc.) are used to draw various plot graphics onto the main plot/rendering area. The clipping rectangle supplied to this method represents the area in which the graph can be plotted, we don't want anything drawn outside of this area, as it wouldn't be within the axis limits, would look odd, and wouldn't be of particular benefit. In your case, you're passing it a list of data points, along with their calculated rendering locations; only data points within the clipping rectangle will be drawn on your plot.
You can see the start of the clipping calculation occuring on line 118 of that source file var clipping = new CohenSutherlandClipping(clippingRectangle); - this is not something I'm particularly familiar with, but a quick wikipedia search shows that it's an algorithm used specifically for working out line clipping, there is it least on other algorithm used elswhere in that source file. I don't believe you need to alter the clipping rectangle, unless the inversion of one of the data points would place it outside the currently drawn region.
As to actually helping arrive at a solution, there are a couple of things I noticed while exploring your code. The first thing I tried was to plot some data points (all positive), and found the entire graph was inverted, essentially because this statement:
if (lpts[i].Y < threshold) is always true for positive values. That's a result of the Y axis coordinate system starting at the top of the window, and increasing toward the bottom of the window. Since the threshold in my case was 0, when translated to a rendering position on the screen, every positive data point's Y position will be smaller than the axis Y value; essentially your logic as to which points are flipped or not, requires inverting. This should get you the behaviour you're after (ensuring the flipped points are calculated correctly.)
Alternative Approach
Rather than get too deep into the clipping rectangle / calculating the transformed data points approach, I went for a slightly lazier route, which could benefit from some tidyup, but may be usefulm depending on your requirements.
I decided to perform the threshold flipping/amendment just before the call to actually render the points is made.
I altered your AbsoluteStairStepSeries class with these changes (To the Render method) in a minimal way, retaining most of your existing structure:
public override void Render(IRenderContext rc, PlotModel model)
{
if (this.ActualPoints.Count == 0)
return;
// Set defaults.
this.VerifyAxes();
OxyRect clippingRect = this.GetClippingRect();
double[] dashArray = this.ActualDashArray;
double[] verticalLineDashArray = this.VerticalLineStyle.GetDashArray();
LineStyle lineStyle = this.ActualLineStyle;
double verticalStrokeThickness = double.IsNaN(this.VerticalStrokeThickness) ?
this.StrokeThickness : this.VerticalStrokeThickness;
OxyColor actualColor = this.GetSelectableColor(this.ActualColor);
// Perform the render action.
Action<IList<Tuple<bool, ScreenPoint>>, IList<Tuple<bool, ScreenPoint>>> renderPoints = (lpts, mpts) =>
{
// Clip the line segments with the clipping rectangle.
if (this.StrokeThickness > 0 && lineStyle != LineStyle.None)
{
if (!verticalStrokeThickness.Equals(this.StrokeThickness) ||
this.VerticalLineStyle != lineStyle)
{
// TODO: change to array
List<ScreenPoint> hlptsOk = new List<ScreenPoint>();
List<ScreenPoint> vlptsOk = new List<ScreenPoint>();
List<ScreenPoint> hlptsFlip = new List<ScreenPoint>();
List<ScreenPoint> vlptsFlip = new List<ScreenPoint>();
double threshold = this.YAxis.Transform(this.Threshold);
for (int i = 0; i + 2 < lpts.Count; i += 2)
{
hlptsOk.Add(lpts[i].Item2);
hlptsOk.Add(lpts[i + 1].Item2);
vlptsOk.Add(lpts[i + 1].Item2);
vlptsOk.Add(lpts[i + 2].Item2);
// Add flipped points so they may be overdrawn.
if (lpts[i].Item1 == true)
{
hlptsFlip.Add(lpts[i].Item2);
hlptsFlip.Add(lpts[i + 1].Item2);
}
}
rc.DrawClippedLineSegments(
clippingRect,
hlptsOk,
actualColor,
this.StrokeThickness,
dashArray,
this.LineJoin,
false);
rc.DrawClippedLineSegments(
clippingRect,
hlptsFlip,
OxyColor.FromRgb(255, 0, 0),
this.StrokeThickness,
dashArray,
this.LineJoin,
false);
rc.DrawClippedLineSegments(
clippingRect,
vlptsOk,
actualColor,
verticalStrokeThickness,
verticalLineDashArray,
this.LineJoin,
false);
rc.DrawClippedLineSegments(
clippingRect,
vlptsFlip,
OxyColor.FromRgb(255, 0, 0),
verticalStrokeThickness,
verticalLineDashArray,
this.LineJoin,
false);
}
else
{
rc.DrawClippedLine(
clippingRect,
lpts.Select(x => x.Item2).ToList(),
0,
actualColor,
this.StrokeThickness,
dashArray,
this.LineJoin,
false);
}
}
if (this.MarkerType != MarkerType.None)
{
rc.DrawMarkers(
clippingRect,
mpts.Select(x => x.Item2).ToList(),
this.MarkerType,
this.MarkerOutline,
new[] { this.MarkerSize },
this.MarkerFill,
this.MarkerStroke,
this.MarkerStrokeThickness);
}
};
// Transform all points to screen coordinates
// Render the line when invalid points occur.
var linePoints = new List<Tuple<bool, ScreenPoint>>();
var markerPoints = new List<Tuple<bool, ScreenPoint>>();
double previousY = double.NaN;
foreach (var point in this.ActualPoints)
{
var localPoint = point;
bool pointAltered = false;
// Amend/Reflect your points data here:
if (localPoint.Y < Threshold)
{
localPoint.Y = Math.Abs(point.Y);
pointAltered = true;
}
if (!this.IsValidPoint(localPoint))
{
renderPoints(linePoints, markerPoints);
linePoints.Clear();
markerPoints.Clear();
previousY = double.NaN;
continue;
}
var transformedPoint = this.Transform(localPoint);
if (!double.IsNaN(previousY))
{
// Horizontal line from the previous point to the current x-coordinate
linePoints.Add(new Tuple<bool, ScreenPoint>(pointAltered, new ScreenPoint(transformedPoint.X, previousY)));
}
linePoints.Add(new Tuple<bool, ScreenPoint>(pointAltered, transformedPoint));
markerPoints.Add(new Tuple<bool, ScreenPoint>(pointAltered, transformedPoint));
previousY = transformedPoint.Y;
}
renderPoints(linePoints, markerPoints);
if (this.LabelFormatString != null)
{
// Render point labels (not optimized for performance).
this.RenderPointLabels(rc, clippingRect);
}
}
I'm using a List<Tuple<bool, ScreenPoint>>, rather than List<ScreenPoint> to store a bool flag against each point, representing whether or not that point has been altered; you could use a small class to simplify the syntax.
Because you're interacting with the point data directly, you don't need to worry about screen position (reversed Y axis), so conceptually the calculation to take the absolute value is easier to read:
// Amend/Reflect your points data here:
if (localPoint.Y < Threshold)
{
localPoint.Y = Math.Abs(point.Y);
pointAltered = true;
}
I notice that your code has reflect above/reflect below, which is probably logic you would insert here if required, I've gone for Math.Abs which you mentioned was your initial requirement.
When it comes to actually rendering the line, I've left the original code which draws the StepSeries in place, so actually the entire series is drawn in green. I've only added a conditional statement to check for modified/reflected points, if any are found, the relevant plot points are added to your existing lists containing flipped points, which are then drawn in red.
The Tuples make things a little messy in the render method (the addition of Item1/Item2), and you could remove the double drawing of the modified points, but I think the results are what you're after (or can certainly point you in the right direction.
Example Behaviour: