Page 1 of 1

Radar chart

Posted: Fri May 25, 2018 1:22 pm
by 9526439
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
Radar.png (34.37 KiB) Viewed 20753 times
Thanks

Re: Radar chart

Posted: Mon May 28, 2018 6:11 am
by 9526439
Please reply us this is very urgent for us.
Thanks

Re: Radar chart

Posted: Mon May 28, 2018 10:18 am
by 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
sllauncher_2018-05-28_12-17-09.png (68.81 KiB) Viewed 20733 times

Re: Radar chart

Posted: Mon May 28, 2018 2:02 pm
by 9526439
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
Untitled.png (42.99 KiB) Viewed 20731 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

Re: Radar chart

Posted: Mon May 28, 2018 2:03 pm
by 9526439
How can i show min and max point for any particular value.

Re: Radar chart

Posted: Tue May 29, 2018 1:50 pm
by 9526439
Please reply to my query....

Thanks
Amol

Re: Radar chart

Posted: Wed May 30, 2018 9:49 am
by 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
TeeChartNetExamples_2018-05-30_11-46-30.png (180.85 KiB) Viewed 20708 times
so in the case of the Radar series you can do something like this:
sllauncher_2018-05-30_11-47-37.png
sllauncher_2018-05-30_11-47-37.png (69.05 KiB) Viewed 20708 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);
		}

Re: Radar chart

Posted: Wed Jun 06, 2018 10:42 am
by 9526439
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
Untitled.png (72.51 KiB) Viewed 20688 times
Also i need a tool tip to show the data of additional draw image. like in above image.

Thanks
Amol

Re: Radar chart

Posted: Thu Jun 07, 2018 1:00 pm
by 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
sllauncher_2018-06-07_14-57-11.png (69.4 KiB) Viewed 20676 times