Radar chart

[amol]

Hi Steema Team,

Can you please send an example for Radar chart in c# silverlight.
I am not able to generate it.
I wanted to create a radar chart like below image.

Radar.png (34.37 KiB) Viewed 20539 times

Thanks

[amol]

Please reply us this is very urgent for us.
Thanks

[Christopher]

Hello!

The following code:

Code: Select all

		public MainPage()
		{
			InitializeComponent();

			tChart1.Header.Visible = false;
			tChart1.Aspect.ClipPoints = false;

			Radar series = new Radar(tChart1.Chart);
			series.Add(100, "Source");
			series.Add(25, "Seal");
			series.Add(100, "Closure");
			series.Add(50, "Reservoir");
			series.Add(90, "Timing");

			
			series.GetVertAxis.SetMinMax(0, 100);
			series.CircleLabels = true;
			series.Brush.Visible = false;
		}

gives me this:

sllauncher_2018-05-28_12-17-09.png (68.81 KiB) Viewed 20519 times

[amol]

Hi Steema Team,

Thanks for the solution. I need some more help.
I need to show the min and max range for some values. see in below image

.

Untitled.png (42.99 KiB) Viewed 20517 times

In this black line cutting the axis is showing min and max for seal and reservoir .
I need same.Please help me in this.

Thanks
Amol

[amol]

How can i show min and max point for any particular value.

[amol]

Please reply to my query....

Thanks
Amol

[Christopher]

Hello Amol,

just to remind you that you can use the TeeChart Draw events to draw anything you like on your charts:

TeeChartNetExamples_2018-05-30_11-46-30.png (180.85 KiB) Viewed 20494 times

so in the case of the Radar series you can do something like this:

sllauncher_2018-05-30_11-47-37.png (69.05 KiB) Viewed 20494 times

using the following code:

Code: Select all

		Radar series;
		public MainPage()
		{
			InitializeComponent();

			tChart1.Header.Visible = false;
			tChart1.Aspect.ClipPoints = false;

			series = new Radar(tChart1.Chart);
			series.Add(100, "Source");
			series.Add(25, "Seal");
			series.Add(100, "Closure");
			series.Add(50, "Reservoir");
			series.Add(90, "Timing");

			
			series.GetVertAxis.SetMinMax(0, 100);
			series.CircleLabels = true;
			series.Brush.Visible = false;

			tChart1.AfterDraw += TChart1_AfterDraw;
		}

		private void TChart1_AfterDraw(object sender, Steema.TeeChart.Silverlight.Drawing.Graphics3D g)
		{
			Point center = new Point(series.CalcXPos(1), series.CalcYPos(1));
			Rect rect = Utils.FromLTRB(center.X - 20, center.Y - 10, center.X + 20, center.Y + 10);

			g.Pen.Color = Colors.Red;

			g.HorizontalLine(rect.Left, rect.Right, center.Y);
			g.VerticalLine(rect.Left, rect.Top, rect.Bottom);
			g.VerticalLine(rect.Right, rect.Top, rect.Bottom);
		}

[amol]

Hi Steema Team,

Thanks for the solution. I need some more help.
I need to draw red marked image but in range using scale of axis and it should correspondent to scale.
For example in below image.

Untitled.png (72.51 KiB) Viewed 20474 times

Also i need a tool tip to show the data of additional draw image. like in above image.

Thanks
Amol

[Christopher]

Hello,

Okay, the solution to this one is a little complicated and involves extracting a little of the TChart source-code - but it is possible, as you can see here:

Code: Select all

		Radar series;
		public MainPage()
		{
			InitializeComponent();

			tChart1.Header.Visible = false;
			tChart1.Aspect.ClipPoints = false;

			series = new Radar(tChart1.Chart);
			series.Add(100, "Source");
			series.Add(25, "Seal");
			series.Add(100, "Closure");
			series.Add(50, "Reservoir");
			series.Add(90, "Timing");

			series.GetVertAxis.SetMinMax(0, 100);
			series.CircleLabels = true;
			series.Brush.Visible = false;

			tChart1.AfterDraw += TChart1_AfterDraw;
		}


		private void CalcXYPos(double xvalue, double yvalue, double aRadius, Axis axis, out double x, out double y)
		{
			double tmp = axis.Maximum - axis.Minimum;
			double tmpDif = axis.Inverted ? axis.Maximum - yvalue : yvalue - axis.Minimum;

			bool tmpAtEnd = tmpDif < 0;

			if ((tmp == 0) || tmpAtEnd)
			{
				x = series.CircleXCenter;
				y = series.CircleYCenter;
			}
			else
			{
				double tmpRadius = tmpDif * aRadius / tmp;
				series.AngleToPos((series.ClockWiseLabels ? -Utils.PiStep : Utils.PiStep) * xvalue, tmpRadius, tmpRadius, out x, out y);
			}
		}

		private void TChart1_AfterDraw(object sender, Steema.TeeChart.Silverlight.Drawing.Graphics3D g)
		{
			Func<Point, Point, Tuple<double, double>> CalculateLine = (first, second) =>
			{
				//y − y1 = m(x − x1)
				double m = (first.Y - second.Y) / (first.X - second.X);
				//y = mx + b
				double b = (m * (-1 * second.X)) + second.Y;
				return new Tuple<double, double>(m, b);
			};

			Func<Tuple<double, double>, Point, Tuple<double, double>> CalculatePerpendicularLine = (aline, apoint) =>
			{
				double m = Math.Pow(aline.Item1, -1) * -1;
				double b = (m * (-1 * apoint.X)) + apoint.Y;
				return new Tuple<double, double>(m, b);
			};

			Func<int, double> GetXValue = (valueIndex) =>
			{
				Func<int> GetMaxValuesCount = () =>
				{
					int result = 0;
					bool FirstTime = true;
					foreach (Series s in tChart1.Series)
					{
						if (s.Active && (FirstTime || ((s.Count > result) && s.Function == null)))
						{
							result = s.Count;
							FirstTime = false;
						}
					}
					return result;
				};

				int tmpIndex = series.ClockWiseLabels ? series.Count - valueIndex : valueIndex;
				return (GetMaxValuesCount() > 0) ? tmpIndex * (360.0 / GetMaxValuesCount()) : 0;
			};

			int index = 1;

			Point center = new Point(series.CalcXPos(index), series.CalcYPos(index));

			g.Pen.Color = Colors.Red;

			double plusValue = series.YValues[index] + (series.YValues[index] * 0.45); //45% of value
			double minusValue = series.YValues[index] - (series.YValues[index] * 0.22); //22% of value

			double x, y;
			CalcXYPos(GetXValue(index), plusValue, series.XRadius, series.GetVertAxis, out x, out y);
			Point max = new Point(x, y);

			CalcXYPos(GetXValue(index), minusValue, series.XRadius, series.GetVertAxis, out x, out y);
			Point min = new Point(x, y);

			g.Line(center, max);
			g.Line(center, min);

			Tuple<double, double> line = CalculateLine(min, max);
			Tuple<double, double> maxline = CalculatePerpendicularLine(line, max);
			Tuple<double, double> minline = CalculatePerpendicularLine(line, min);

			//draw whiskers
			int offset = 3;
			g.Line(max, new Point(max.X + offset, (max.X + offset) * maxline.Item1 + maxline.Item2));
			g.Line(max, new Point(max.X - offset, (max.X - offset) * maxline.Item1 + maxline.Item2));

			g.Line(min, new Point(min.X + offset, (min.X + offset) * minline.Item1 + minline.Item2));
			g.Line(min, new Point(min.X - offset, (min.X - offset) * minline.Item1 + minline.Item2));
		}

sllauncher_2018-06-07_14-57-11.png (69.4 KiB) Viewed 20462 times