Ichimoku shading

5 posts, 1 answers
  1. Justin
    Justin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 10 Feb 2012 Link to this post

    Is there a built-in way or could anybody point me to the right direction to go about creating Ichimoku cloud areas in [presumably] RadChart. For clarification, there's essentially two line series, one green, one red. When the red one's higher, the area between the two is highlighted red, when the green one's higher the area between's highlighted green.

    Text version follows; R = red line, r = red shading, G = green line, g = green shading

    RRRRRRRR                                                               GGGGGG
    rrrrrrrrrrrrrrrrrRRRRRRR                               GGGGGgggggggg
    rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrRR               GGGGggggggggggggggg
    rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrRGGGGgggggggggggggggggRRR
    rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrGGGRggggggggggggggRRRRR
    GGGGGGGGGGGGGG           RRRRRRRRRRR

    Any help/pointers will be much appreciated.

    Justin
  2. Justin
    Justin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 10 Feb 2012 Link to this post

    FWIW I've gone down a route of overlaid area chart series. This works so long as values remain positive, but fails where one of the values is positive and one's negative.

    I've posted code to date, suggestions to further deal with the above issue would be great (more from a puritanical desire than a must have need as I don't expect the issue is consequential to my use case).

    using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Documents;
    using System.Windows.Media;
     
    namespace IchimokuCloudArea
    {
      public partial class MainWindow : Window
      {
        public MainWindow()
        {
          InitializeComponent();
     
          List<IchimokuCloudDataPoint> dataPoints = new List<IchimokuCloudDataPoint>();
          dataPoints.Add(new IchimokuCloudDataPoint(0, 4, 3));
          dataPoints.Add(new IchimokuCloudDataPoint(1, 5, 3));
          dataPoints.Add(new IchimokuCloudDataPoint(2, 5, 3));
          dataPoints.Add(new IchimokuCloudDataPoint(3, 6, 2));
          dataPoints.Add(new IchimokuCloudDataPoint(4, 6, 1));
          dataPoints.Add(new IchimokuCloudDataPoint(5, 7, -1));
          dataPoints.Add(new IchimokuCloudDataPoint(6, 8, 0));
          dataPoints.Add(new IchimokuCloudDataPoint(7, 7, 1));
          dataPoints.Add(new IchimokuCloudDataPoint(8, 6, 3));
          dataPoints.Add(new IchimokuCloudDataPoint(9, 6, 4));
          dataPoints.Add(new IchimokuCloudDataPoint(10, 5, 5));
          dataPoints.Add(new IchimokuCloudDataPoint(11, 4, 5));
          dataPoints.Add(new IchimokuCloudDataPoint(12, 3, 6));
          dataPoints.Add(new IchimokuCloudDataPoint(13, 2, 6));
          dataPoints.Add(new IchimokuCloudDataPoint(14, 2, 7));
          dataPoints.Add(new IchimokuCloudDataPoint(15, 2, 8));
          dataPoints.Add(new IchimokuCloudDataPoint(16, 1, 9));
          dataPoints.Add(new IchimokuCloudDataPoint(17, 0, 10));
          dataPoints.Add(new IchimokuCloudDataPoint(18, -1, 10));
          dataPoints.Add(new IchimokuCloudDataPoint(19, -2, 9));
          dataPoints.Add(new IchimokuCloudDataPoint(20, -2, 6));
     
          Telerik.Windows.Controls.Charting.DataSeries redSeries = IchimokuSeries(Brushes.LightSalmon);
          Telerik.Windows.Controls.Charting.DataSeries greenSeries = IchimokuSeries(Brushes.LightGreen);
          Telerik.Windows.Controls.Charting.DataSeries baseSeries = IchimokuSeries(Brushes.White);
          baseSeries.Definition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.None;
     
          foreach (IchimokuCloudDataPoint dp in dataPoints)
          {
            greenSeries.Add(dp.GreenDataPoint);
            redSeries.Add(dp.RedDataPoint);
            baseSeries.Add(dp.BaseDataPoint);
          }
     
          this.radchart1.DefaultView.ChartArea.DataSeries.Add(redSeries);
          this.radchart1.DefaultView.ChartArea.DataSeries.Add(greenSeries);
          this.radchart1.DefaultView.ChartArea.DataSeries.Add(baseSeries);
        }
     
        private Telerik.Windows.Controls.Charting.DataSeries IchimokuSeries(Brush brush)
        {
          Telerik.Windows.Controls.Charting.DataSeries result = new Telerik.Windows.Controls.Charting.DataSeries();
          Telerik.Windows.Controls.Charting.AreaSeriesDefinition asd = new Telerik.Windows.Controls.Charting.AreaSeriesDefinition();
          asd.ShowPointMarks = false;
          asd.ShowItemLabels = false;
          asd.ShowItemToolTips = true;
          result.Definition = asd;
          result.Definition.Appearance.Fill = brush;
          return result;
        }
      }
     
      public class IchimokuCloudDataPoint
      {
        public Double X;
        public Double RedY;
        public Double GreenY;
        public Double BaseY
        {
          get
          {
            return Math.Min(RedY, GreenY);
          }
        }
     
        public IchimokuCloudDataPoint(Double x, Double redY, Double greenY)
        {
          X = x;
          RedY = redY;
          GreenY = greenY;
        }
     
        public Telerik.Windows.Controls.Charting.DataPoint RedDataPoint
        {
          get
          {
            return new Telerik.Windows.Controls.Charting.DataPoint(X, RedY);
          }
        }
     
        public Telerik.Windows.Controls.Charting.DataPoint GreenDataPoint
        {
          get
          {
            return new Telerik.Windows.Controls.Charting.DataPoint(X, GreenY);
          }
        }
     
        public Telerik.Windows.Controls.Charting.DataPoint BaseDataPoint
        {
          get
          {
            return new Telerik.Windows.Controls.Charting.DataPoint(X, BaseY);
          }
        }
      }
    }
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 15 Feb 2012 Link to this post

    Hello Justin,

    Why don't you try to use Range Series Definitions and modify your code as follows:

    • Creating the range series:
    Telerik.Windows.Controls.Charting.DataSeries rangeSeries1 = IchimokuSeries(Brushes.LightSalmon);
    Telerik.Windows.Controls.Charting.DataSeries rangeSeries2 = IchimokuSeries(Brushes.LightGreen);

    • adding data points to them:
    foreach (IchimokuCloudDataPoint dp in dataPoints)
    {
        if (dp.GreenDataPoint.YValue >= dp.RedDataPoint.YValue)
        {
            rangeSeries2.Add(new DataPoint()
            {
                XValue = dp.X,
                High = dp.GreenDataPoint.YValue,
                Low = dp.RedDataPoint.YValue
            });
        }
     
        if (dp.GreenDataPoint.YValue <= dp.RedDataPoint.YValue)
        {
            rangeSeries1.Add(new DataPoint()
            {
                XValue = dp.X,
                High = dp.RedDataPoint.YValue,
                Low = dp.GreenDataPoint.YValue
            });
        }
    }

    You will get the result in the attached image.

    Greetings,
    Sia
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Justin
    Justin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 16 Feb 2012 Link to this post

    Excellent, that's exactly the sort of pointer I needed - hadn't found the RangedDataSeries myself. In addition to your pointer I needed to pull out a few dusty trigonometry functions to locate and add more points to cover zero intercepts, crossovers and inversions to get the right shape on the cloud but all working now.

    The code's got a lot bigger so not posting this time the full working version; pity zip's aren't allowed as attachments. If you're interested, ask.

    Many thanks again!
  6. Sia
    Admin
    Sia avatar
    667 posts

    Posted 21 Feb 2012 Link to this post

    Hi Justin,

    I am glad to hear that now everything works as expected.

    Kind regards,
    Sia
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready