Image annotations performance issue

A forum dedicated to WPF version of LightningChart Ultimate.

Moderator: Arction_LasseP

wojtst
Posts: 10
Joined: Tue Aug 01, 2017 2:33 pm

Image annotations performance issue

Post by wojtst » Tue Oct 17, 2017 10:13 am

Hello,

I am developing an application which uses LightningChart Ultimate WPF.
I have a problem with drawing multiple images using AnnotationsXY. I need to render large numbers of images (eg 30k) but this results in very slow rendering and chart is not responsible.
Is there any solution for the chart to work smoothly?

There is a piece of code that i used to create Annotations

Code: Select all

AnnotationXY imageAnnotation = new AnnotationXY();
                    imageAnnotation.Style = AnnotationStyle.Rectangle;
                    imageAnnotation.LocationCoordinateSystem = CoordinateSystem.AxisValues;
                    imageAnnotation.Sizing = AnnotationXYSizing.ScreenCoordinates;
                    imageAnnotation.SizeScreenCoords.Width = 16;
                    imageAnnotation.SizeScreenCoords.Height = 16;
                    imageAnnotation.TextStyle.Visible = false;
                    imageAnnotation.BorderVisible = false;
                    imageAnnotation.LocationAxisValues.X = annotationCenterPosition;
                    imageAnnotation.LocationAxisValues.Y = yPositionImage;
                    imageAnnotation.Anchor.X = 0.5f;
                    imageAnnotation.Anchor.Y = 0.5f;
                    imageAnnotation.TextStyle.VerticalAlign = AlignmentVertical.Top;
                    imageAnnotation.RotateAngle = 0;
                    imageAnnotation.Fill.Bitmap.Image = toBitmapFrame(imageBytes);
                    imageAnnotation.Fill.Style = RectFillStyle.Bitmap;
                    imageAnnotation.Fill.Bitmap.Layout = BitmapFillLayout.Stretch;
                    imageAnnotation.Fill.Color = Colors.Transparent;
                    imageAnnotation.Fill.GradientFill = GradientFill.Solid;
                    imageAnnotation.Fill.GradientColor = Colors.Transparent;
                    imageAnnotation.Shadow.Visible = false;
                    imageAnnotation.MouseInteraction = false;

                    ImageAnnotations.Add(imageAnnotation);
ImageAnnotations is a collection of AnnotationXY which is databound to Annotations in ViewXY view.

There is a preview what I want to achieve. The first image have a max. zoom out and the second is slightly zoomed in. Even when chart is zoomed in and it displays only several images the performance is not good enough.
The upper chart in the images is a seperated chart control witch disabled axes only used to display images. The lower one display series in segments.

Image
Image

Thanks for Your help,
Best regards

User avatar
ArctionPasi
Posts: 1365
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland

Re: Image annotations performance issue

Post by ArctionPasi » Tue Oct 17, 2017 11:29 am

Hi!

Please try SeriesEventMarkers or ChartEventMarkers, without any text on them. Markers support bitmap image as well, and are more lightweight objects than annotations.
LightningChart Support Team, PT

wojtst
Posts: 10
Joined: Tue Aug 01, 2017 2:33 pm

Re: Image annotations performance issue

Post by wojtst » Tue Oct 17, 2017 12:12 pm

Thanks for your reply.

With your suggestion, I have tried SeriesEventMarkers and ChartEventMarkers. Both works way faster than Annotations. SeriesEventMarkers working slightly faster than ChartEventMarkers.
Do you know is there any solution to increase performance, even more, when displaying a big amount of markers. Maybe any properties in a chart or sorting these markers?

Best regards

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

Re: Image annotations performance issue

Post by ArctionKestutis » Tue Oct 17, 2017 1:12 pm

Hello,

Disabling Mouse interaction would help, as well as Symbol.BorderWidth=0, Symbol.GradientFill=Solid.
You could also think about the design of your chart. Maybe you can make Markers invisible then they not in the range. Or use just few Annotation/Markers and change it location whenever mouse move over certain place.

Hope this helps.
All the best.

User avatar
ArctionPasi
Posts: 1365
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland

Re: Image annotations performance issue

Post by ArctionPasi » Tue Oct 17, 2017 1:33 pm

If you have only like 2 different bitmaps, using 2 PointLineSeries could work as well (both ~15 k points), and setting PointStyle.Shape = Bitmap. It should render much faster, but may produce Z order issues in your app.
LightningChart Support Team, PT

wojtst
Posts: 10
Joined: Tue Aug 01, 2017 2:33 pm

Re: Image annotations performance issue

Post by wojtst » Fri Oct 20, 2017 7:32 am

Thank you guys for your response.

I tried two solutions and I will stay with PointLineSeries because they work faster. Unfortunately, I had to insert more series (over 2) than Pasi mentioned. I hope that won't make any other problems than z-order.

Best regards.

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

Re: Image annotations performance issue

Post by ArctionKestutis » Fri Oct 20, 2017 8:49 am

Each series is rendered in order of its appearance in the list (ViewXY.PointLineSeries). Therefore, if points overlap the first series will be masked, while last series will be at the top. And if you have mouse-event, they will be taken by top most.