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

Ichimoku shading

4 Answers 38 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 10 Feb 2012, 10:42 AM
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

4 Answers, 1 is accepted

Sort by
0
Justin
Top achievements
Rank 1
answered on 10 Feb 2012, 01:08 PM
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);
      }
    }
  }
}
0
Accepted
Sia
Telerik team
answered on 15 Feb 2012, 04:37 PM
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 >>
0
Justin
Top achievements
Rank 1
answered on 16 Feb 2012, 06:38 PM
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!
0
Sia
Telerik team
answered on 21 Feb 2012, 01:10 PM
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 >>
Tags
Chart
Asked by
Justin
Top achievements
Rank 1
Answers by
Justin
Top achievements
Rank 1
Sia
Telerik team
Share this question
or