Pre loader

Rendearable Serie with arrow line

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

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.

Version
3.1
Images
  • You must to post comments
0
0

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

Images
  • You must to post comments
0
0

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

  • You must to post comments
0
0

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.

  • You must to post comments
0
0

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 :

https://www.scichart.com/documentation/v4.x/webframe.html#Point%20Marker%20API%20-%20BaseRenderableSeries.Pointmarker.html

The DiamondPointMarker example is close to what you trying to achieve

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies