This is a migrated thread and some comments may be shown as answers.

Are there any samples for drawing points on LineSeries?

5 Answers 104 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 19 Jan 2021, 08:03 AM

Hello, Johnny,

If you need to customize certain points, you can iterate the LineSeries.Children collection and apply the desired style for the respective point element. You can find below a sample approach:

//populate the chart with data
            
           foreach (CartesianLinePointElement pointElement in lineSeria.Children)
            {
                CategoricalDataPoint dataPoint = pointElement.DataPoint as CategoricalDataPoint;
                if (dataPoint.Value > 10) 
                {
                    pointElement.BackColor = Color.Aqua;
                    pointElement.BorderColor = Color.Red;
                    pointElement.BorderWidth = 1;
                    pointElement.PointSize = new SizeF(15, 15);
                }
            }

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

answered on 19 Jan 2021, 10:35 AM

Hello, Johnny,

RadChartView provides a convenient way to control the rendering of series and data points by using a custom renderer. A sample approach is available here: https://docs.telerik.com/devtools/winforms/controls/chartview/customization/custom-rendering

I would recommend you to download the Telerik source code from your account and have a look at the default implementation that LineSeriesDrawPart offers. In its DrawPoints method you can get familiar with the exact rendering of the points and you can add any customizations to the available implementation.

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

answered on 21 Jan 2021, 03:57 PM

I found my preferred way.

public class CustomLineSeriesDrawPart : LineSeriesDrawPart

{

private static readonly FieldInfo IsEmptyFieldOfDataPoint = typeof(DataPoint).GetField(

"isEmpty",

BindingFlags.Instance | BindingFlags.NonPublic);

public CustomLineSeriesDrawPart(LineSeriesBase series, IChartRenderer renderer)

: base(series, renderer)

{

}

protected override void DrawPoints()

{

var points = this.GetPointsPositionsArray();

if (points == null) return;

var radGraphics = new RadGdiGraphics(this.Renderer.Surface as Graphics);

var pointElements = new List<DataPointElement>();

var comparer = new DataPointElementLayoutSlotComparer();

if (this.Renderer is CartesianRenderer cartesianRenderer)

{

comparer.Vertical = cartesianRenderer.Area.Orientation == Orientation.Vertical;

}

comparer.Collection = this.Element.DataPoints;

for (var i = 0; i < this.Element.Children.Count; i++)

{

var pointElement = this.Element.Children[i] as DataPointElement;

var index = pointElements.BinarySearch(pointElement, comparer);

pointElements.Insert(~index, pointElement);

}

for (var i = 0; i < pointElements.Count; i++)

{

var childElement = pointElements[i];

if (childElement == null) continue;

if (!childElement.IsVisible) continue;

if ((bool)IsEmptyFieldOfDataPoint.GetValue(pointElements[i].DataPoint)) continue;

if (childElement.PointSize.Width < 1f) continue;

if (childElement.PointSize.Height < 1f) continue;

ChangePointStyle(childElement, out var pointSize);

var pointLocation = points[i];

var pointRect = new RectangleF(pointLocation, pointSize);

pointRect.Offset(pointSize.Width / -2f, pointSize.Height / -2f);

childElement.BackgroundShape?.Paint((Graphics)radGraphics.UnderlayGraphics, pointRect);

GraphicsPath pointPath;

if (childElement.Shape != null)

{

pointPath = childElement.Shape.CreatePath(pointRect);

}

else

{

pointPath = new GraphicsPath();

pointPath.AddEllipse(pointRect);

}

if (pointPath != null)

{

var pointFill = new FillPrimitiveImpl(childElement, null);

pointFill.PaintFill(radGraphics, pointPath, pointRect);

var pointBorder = new BorderPrimitiveImpl(childElement, null);

pointBorder.PaintBorder(radGraphics, null, pointPath, pointRect);

if (childElement.Image != null)

{

var pointImage = new ImagePrimitiveImpl(childElement);

pointImage.PaintImage(

radGraphics,

childElement.Image,

pointRect,

childElement.ImageLayout,

childElement.ImageAlignment,

childElement.ImageOpacity,

false);

}

pointPath.Dispose();

}

private static void ChangePointStyle(DataPointElement pointElement, out SizeF pointSize)

{

switch (pointElement.DataPoint.DataItem)

{

case MyData myData when myData.Value >= 30:

pointElement.BackColor = ColorTranslator.FromHtml("#981B1B");

pointSize = new SizeF(pointElement.PointSize.Width * 1.2f, pointElement.PointSize.Height * 1.2f);

break;

default:

pointSize = pointElement.PointSize;

break;

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Are there any samples for drawing points on LineSeries?

5 Answers, 1 is accepted