Hello,
I need to plot an arrow line serie, that is, a fastLine rendearable serie where the point markers are connected by arrow
(in the middle or the end) lines.
Screenshots attached.
Thanks in advance.
- argonte asked 7 years ago
- You must login to post comments
Sorry for late answer, I do not get any notifications on post status, anyway… if needed, here are the steps in more details.
1/ Create a custom PointMarker by inheriting from BasePointMarker, override Draw methods in order to draw an arrow
public override void Draw(IRenderContext2D context, IEnumerable<Point> centers)
{
var markerLocations = centers.ToArray();
for (var i = 0; i < markerLocations.Length; ++i)
{
var center = markerLocations[i];
var width2 = (float) (Width * 0.5);
var height2 = (float) (Height * 0.5);
var fill = context.CreateBrush(Fill);
var stroke = context.CreatePen(Stroke, AntiAliasing, (float) StrokeThickness);
var top = center.Y - height2;
var bottom = center.Y + height2;
var right = center.X + width2;
var arrowPoints = new[]
{
new Point(center.X, top),
new Point(right, center.Y),
new Point(center.X, bottom),
new Point(center.X, top),
};
context.FillPolygon(fill, arrowPoints);
context.DrawLines(stroke, arrowPoints);
}
}
2/ Create a Custom serie by inheriting from CustomRenderableSeries, override the Draw method in order to draw a line (You need to arrange your data in some sort of range, from – to)
protected override void Draw(IRenderContext2D renderContext, IRenderPassData renderPassData)
{
base.Draw(renderContext, renderPassData);
var dataPointSeries = renderPassData.PointSeries;
if (dataPointSeries.Count == 0) return;
var strokeDashArray = new DoubleCollection { 5, 5 };
var dataRanges = dataPointSeries.XValues.ToRange(); //todo : arrange data in range
var drawingHelper =
SeriesDrawingHelpersFactory.GetSeriesDrawingHelper(renderContext, CurrentRenderPassData);
using (var pen = renderContext.CreatePen(Stroke, false, 0.5f, Opacity, strokeDashArray.ToArray(),
PenLineCap.Flat))
{
foreach (var range in dataRanges)
{
var points = range.ToArray();
if(points.Length < 2)continue;
var x1 = (float)renderPassData.XCoordinateCalculator.GetCoordinate(points[0]);
var x2 = (float)renderPassData.XCoordinateCalculator.GetCoordinate(points[1]);
var y1 = (float)renderPassData.YCoordinateCalculator.GetCoordinate(dataPointSeries.YValues[0]);
var pt1 = new Point(x1, y1);
var pt2 = new Point(x2, y1);
drawingHelper.DrawLine(pt1, pt2, pen);
}
}
DrawPointMarkers(renderContext, dataPointSeries);
}
3/ Finally, when a serie is needed
private MyCustomRendableSeries CreateRendableSerie(IDataSeries<double, double> dataSeries)
{
var renderableSeries = new MyCustomRendableSeries
{
DataSeries = dataSeries,
DrawNaNAs = LineDrawMode.Gaps,
Stroke = Colors.Blue,
StrokeThickness = 1,
Opacity = 0.8,
PointMarker = new CustomPointMarker
{
Width = 15,
Height = 8,
Stroke = Colors.Blue,
StrokeThickness = 1
}
};
return renderableSeries;
}
using the steps describes above, I was able to achieved this
- Patrick Tshibanda answered 7 years ago
- last edited 7 years ago
- You must login to post comments
Hi Patrick,
Unfortunately I am using version 3.1 of SciChart.
In version 3.1 that code does not work. The SeriesDrawingHelpersFactory doesn’t exist; the IPointSeries doesn’t have an XYValues properties, the CustomRenderableSeries doesn’t have a DrawPointMarkers method.
Regards
- argonte answered 7 years ago
- You must login to post comments
Hi Patrick,
I need the arrow on the line series, but I can’t understand how I can draw an arrow at the end or in the middle of a line by creating (and using) a custom PointMarker.
I really need a way to change a line serie by an “arrow” line one, do not change the PointMarker.
Regards.
- argonte answered 7 years ago
- You must login to post comments
You can use LineArrowAnnotations for this, just check : https://www.scichart.com/annotations-are-easy/
However, if you need the arrow on the line series itself, you will need to create a custom PointMarker by inheriting from BasePointMarker and overriding the Draw method, there is a example here :
The DiamondPointMarker example is close to what you trying to achieve
- Patrick Tshibanda answered 7 years ago
- You must login to post comments
Please login first to submit.