Display Buy/Sell Indicator in CandleStickSeries based ChartView

2 posts, 0 answers
  1. willie johnson
    willie johnson avatar
    7 posts
    Member since:
    Apr 2006

    Posted 26 Feb 2018 Link to this post

    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?

  2. Hristo
    Admin
    Hristo avatar
    1520 posts

    Posted 27 Feb 2018 Link to this post

    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 CandlestickSeriesDrawParthttps://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.
Back to Top