SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

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

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
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

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
Showing 4 results
Your Answer

Please first to submit.