willie johnson
Top achievements
Rank 1
Rank 1
willie johnson
asked on 26 Feb 2018, 03:40 PM
Need help trying to figure out how to add custom buy/sell indicator, label and or colors to a chart that is based on the CandleStick Series. I attached a example of what i am looking to accomplish, this is a screenshot of an existing chart i created, it display the O,H,L,V, and other indicators like ema, just having a hard time trying to figure out how to add custom items like symbols (triangles, arrows, and a bar) at a specific point in date and time and display the symbol, and buy/sell label how do i accomplish this and is this possible using RadChartView?
1 Answer, 1 is accepted
0
Hello Willie,
Thank you for writing.
If I understand correctly, you need to customize the data points displayed in the chart. This can be accomplished with a custom renderer and custom CandlestickSeriesDrawPart: https://docs.telerik.com/devtools/winforms/chartview/customization/custom-rendering.
In the context of the CandleStickSeries you can change the renderer this way:
The example above will draw a median line through each of the data points. It is up to you, to implement the DrawSeriesParts method according to your scenario.
Should you have further questions please do not hesitate to write back.
Regards,
Hristo
Progress Telerik
Thank you for writing.
If I understand correctly, you need to customize the data points displayed in the chart. This can be accomplished with a custom renderer and custom CandlestickSeriesDrawPart: https://docs.telerik.com/devtools/winforms/chartview/customization/custom-rendering.
In the context of the CandleStickSeries you can change the renderer this way:
public partial class Form1 : Form{ public Form1() { InitializeComponent(); this.radChartView1.CreateRenderer += radChartView1_CreateRenderer; CandlestickSeries candlestickSeries = new CandlestickSeries(); //o h l c candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 11, 7, 8, DateTime.Now)); candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 9, 5, 9, DateTime.Now.AddDays(1))); candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 10, DateTime.Now.AddDays(2))); candlestickSeries.DataPoints.Add(new OhlcDataPoint(7, 10, 6, 9, DateTime.Now.AddDays(3))); this.radChartView1.Series.Add(candlestickSeries); } private void radChartView1_CreateRenderer(object sender, ChartViewCreateRendererEventArgs e) { e.Renderer = new CustomCartesianRenderer(e.Area as CartesianArea); }}public class CustomCartesianRenderer : CartesianRenderer{ public CustomCartesianRenderer(CartesianArea area) : base(area) { } protected override void Initialize() { base.Initialize(); for (int i = 0; i < this.DrawParts.Count; i++) { CandlestickSeriesDrawPart linePart = this.DrawParts[i] as CandlestickSeriesDrawPart; if (linePart != null) { this.DrawParts[i] = new MyCandlestickSeriesDrawPart((CandlestickSeries)linePart.Element, this); } } }}public class MyCandlestickSeriesDrawPart : CandlestickSeriesDrawPart{ public MyCandlestickSeriesDrawPart(CandlestickSeries series, IChartRenderer renderer) : base(series, renderer) { } public override void DrawSeriesParts() { RadGdiGraphics radGraphics = new RadGdiGraphics(((Graphics)this.Renderer.Surface)); for (int i = 0; i < this.Element.Children.Count; i++) { DataPointElement childElement = (DataPointElement)this.Element.Children[i]; RadRect slot = this.Element.DataPoints[i].LayoutSlot; RectangleF rect = new RectangleF((float)(this.OffsetX + slot.X), (float)(this.OffsetY + slot.Y), (float)slot.Width, (float)slot.Height); rect.Y++; OhlcDataPoint point = this.Element.DataPoints[i] as OhlcDataPoint; GraphicsPath path = ConstructPath(point, rect); if (childElement.BackgroundShape != null) { childElement.BackgroundShape.Paint((Graphics)radGraphics.UnderlayGraphics, rect); } if (point.IsFalling) { FillPrimitiveImpl fill = new FillPrimitiveImpl(childElement, null); fill.PaintFill(radGraphics, path, rect); } BorderPrimitiveImpl border = new BorderPrimitiveImpl(childElement, null); border.PaintBorder(radGraphics, null, path, rect); rect.Y--; radGraphics.DrawLine(Color.Red, rect.X, rect.Y + rect.Height / 2, rect.X + rect.Width, rect.Y + rect.Height / 2); } }}The example above will draw a median line through each of the data points. It is up to you, to implement the DrawSeriesParts method according to your scenario.
Should you have further questions please do not hesitate to write back.
Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.