How to display some lines on the real-time chart.

A forum dedicated to WPF version of LightningChart Ultimate.

Moderator: Queue Moderators

Post Reply
lcuser
Posts: 5
Joined: Tue May 08, 2018 1:38 am

How to display some lines on the real-time chart.

Post by lcuser » Fri May 18, 2018 2:36 am

I have some needs to mark some range on the real-time chart.Like the red part on the image below.Two vertical lines and one horizontal line that all three with two direction arrows. I find a way to make it is to use LineCollection but that lack arrows on the line.Or use annotation but annotation only have one direction arrow.Would you mind giving me a better advice to accomplish red colored part on the chart ?Thanks.
Attachments
chart.jpg
chart.jpg (25.83 KiB) Viewed 5097 times

ArctionKestutis
Posts: 552
Joined: Mon Mar 14, 2016 9:22 am

Re: How to display some lines on the real-time chart.

Post by ArctionKestutis » Fri May 18, 2018 10:00 am

Hello,

If arrows are not mandatory, you can use Bands object/series (at least for Xaxis). Please see corresponding examples in our Demo App.
However, Annotation has Caliper style, which perfectly suitable here.
Annotation Style Arrow/Caliper
Annotation Style Arrow/Caliper
AnnotationCaliper.jpg (8.37 KiB) Viewed 5092 times
Here is the code from our "Annotations" example, which creates it:

Code: Select all

            //Caliper from location to target
            AnnotationXY annotAxisValues3 = new AnnotationXY(chart.ViewXY, xAxis, yAxis);
            annotAxisValues3.Style = AnnotationStyle.Arrow;
            annotAxisValues3.ArrowStyleBegin = ArrowStyle.Caliper;
            annotAxisValues3.ArrowStyleEnd = ArrowStyle.Caliper;
            annotAxisValues3.ArrowLineStyle.Width = 5; 
            annotAxisValues3.LocationCoordinateSystem = CoordinateSystem.AxisValues;
            annotAxisValues3.TargetAxisValues.X = pointsArray[pointIndex].X;
            annotAxisValues3.TargetAxisValues.Y = pointsArray[pointIndex].Y;
            annotAxisValues3.LocationAxisValues.X = pointsArray[pointIndex].X + 2.0;
            annotAxisValues3.LocationAxisValues.Y = pointsArray[pointIndex].Y - 6.0;
            annotAxisValues3.Anchor.X = 1.2f;
            annotAxisValues3.Anchor.Y = 0.5f;
            annotAxisValues3.TextStyle.Color = Color.White;
            UpdateCaliperText(annotAxisValues3);
			annotAxisValues3.LocationAxisValuesChangedByMouse += annotAxisValues3_LocationAxisValuesChangedByMouse;
			annotAxisValues3.TargetChangedByMouse += annotAxisValues3_TargetChangedByMouse;
			annotAxisValues3.AnchorAdjustedByMouse += annotAxisValues3_AnchorAdjustedByMouse;
            chart.ViewXY.Annotations.Add(annotAxisValues3);
Properties ArrowStyleBegin and ArrowStyleEnd could be set Arrow as well.

NOTE: in current version of LightningChart Caliper is not completely drawn (missing perpendicular line in the sharp arrow end) for RenderingEngine11. To see proper Caliper drawing you would need to use RenderingEngine9:

Code: Select all

            _chart.(Chart)RenderOptions.DeviceType = RendererDeviceType.AutoPreferD9; // or HardwareOnlyD9;

lcuser
Posts: 5
Joined: Tue May 08, 2018 1:38 am

Re: How to display some lines on the real-time chart.

Post by lcuser » Tue May 22, 2018 3:45 am

ArctionKestutis wrote:Hello,

If arrows are not mandatory, you can use Bands object/series (at least for Xaxis). Please see corresponding examples in our Demo App.
However, Annotation has Caliper style, which perfectly suitable here.
AnnotationCaliper.jpg
Here is the code from our "Annotations" example, which creates it:

Code: Select all

            //Caliper from location to target
            AnnotationXY annotAxisValues3 = new AnnotationXY(chart.ViewXY, xAxis, yAxis);
            annotAxisValues3.Style = AnnotationStyle.Arrow;
            annotAxisValues3.ArrowStyleBegin = ArrowStyle.Caliper;
            annotAxisValues3.ArrowStyleEnd = ArrowStyle.Caliper;
            annotAxisValues3.ArrowLineStyle.Width = 5; 
            annotAxisValues3.LocationCoordinateSystem = CoordinateSystem.AxisValues;
            annotAxisValues3.TargetAxisValues.X = pointsArray[pointIndex].X;
            annotAxisValues3.TargetAxisValues.Y = pointsArray[pointIndex].Y;
            annotAxisValues3.LocationAxisValues.X = pointsArray[pointIndex].X + 2.0;
            annotAxisValues3.LocationAxisValues.Y = pointsArray[pointIndex].Y - 6.0;
            annotAxisValues3.Anchor.X = 1.2f;
            annotAxisValues3.Anchor.Y = 0.5f;
            annotAxisValues3.TextStyle.Color = Color.White;
            UpdateCaliperText(annotAxisValues3);
			annotAxisValues3.LocationAxisValuesChangedByMouse += annotAxisValues3_LocationAxisValuesChangedByMouse;
			annotAxisValues3.TargetChangedByMouse += annotAxisValues3_TargetChangedByMouse;
			annotAxisValues3.AnchorAdjustedByMouse += annotAxisValues3_AnchorAdjustedByMouse;
            chart.ViewXY.Annotations.Add(annotAxisValues3);
Properties ArrowStyleBegin and ArrowStyleEnd could be set Arrow as well.

NOTE: in current version of LightningChart Caliper is not completely drawn (missing perpendicular line in the sharp arrow end) for RenderingEngine11. To see proper Caliper drawing you would need to use RenderingEngine9:

Code: Select all

            _chart.(Chart)RenderOptions.DeviceType = RendererDeviceType.AutoPreferD9; // or HardwareOnlyD9;
Thank you so much.Great advice.

Post Reply