Howto display two bar series one over another (one is solid color, another is gradient)

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
bairog
Newbie
Newbie
Posts: 52
Joined: Fri Dec 07, 2018 12:00 am

Howto display two bar series one over another (one is solid color, another is gradient)

Post by bairog » Thu Dec 13, 2018 10:53 am

Hello.
Lets say we have a set of sample values (each one is between MinValue and MaxValue). And for each sample we need to do the following:
  1. Draw a bar representing MaxValue with a solid Gray color
  2. Draw a bar representing sample value with a gradient color: close to MinValue is green, middle is yellow, close to MaxValue is red
  3. Each sample's bar should be drawn just over MaxValue bar (as it looks like in TeeChart Gallery for a Bar chart): Image)
I've tried to implement it with a single bar (setting gradient colors and also setting it type to relative). But I failed, because adding a point with a solid Gray color doesn't work at all (color remains gradient).
The only color that works is Transparent (and I have to add at least one point with MaxValue and Transparent color to force relative gradient to be calculated from the MaxValue).
So I was forced to add another bar with solid Gray color (and as many points to it as many samples I have). But now my two bars are displayed side-by-side, not one above another:Image
And my code for an image above looks like:

Code: Select all

bar1.Add(0, 500);
bar1.Add(1, 500);
bar1.Add(2, 500);

bar2.Add(0, 500, Color.Transparent);
bar2.Add(0, 125);
bar2.Add(1, 350);
bar2.Add(2, 450);
So my questions are:
1) Is there a way to implement my task with a single bar?
2) If no - how can I display two bar series one over another?

Thank you in advance.
Last edited by bairog on Thu Dec 13, 2018 12:46 pm, edited 1 time in total.

Christopher
Guru
Posts: 1192
Joined: Fri Nov 15, 2002 12:00 am

Re: Howto display two bar series one over another (one is solid color, another is gradient)

Post by Christopher » Thu Dec 13, 2018 12:36 pm

Hello,
bairog wrote:
Thu Dec 13, 2018 10:53 am
1) Is there a way to implement my task with a single bar?
One possibility would be to use the ErrorBar series, e.g.

Code: Select all

		private ErrorBar _bar;
		private void InitializeChart()
		{

			_bar = new ErrorBar(tChart1.Chart);
			_bar.Gradient.Visible = true;
			_bar.GradientRelative = true;
			_bar.Gradient.StartColor = Color.Red;
			_bar.Gradient.EndColor = Color.Green;
			_bar.ErrorPen.Color = Color.Fuchsia;

			tChart1.GetAxesChartRect += TChart1_GetAxesChartRect;

			double maxValue = 30;

			_bar.Add(1, 20, maxValue - 20);
			_bar.Add(2, 21, maxValue - 21);
			_bar.Add(3, 22, maxValue - 22);
			_bar.Add(4, 23, maxValue - 23);
		}

		private void TChart1_GetAxesChartRect(object sender, GetAxesChartRectEventArgs e)
		{
			_bar.Gradient.CustomTargetRectangle = e.AxesChartRect;
		}
bairog wrote:
Thu Dec 13, 2018 10:53 am
2) If no - how can I display two bar series one above another?
You can use the MultiBar property to stack Bar series, e.g.

Code: Select all

		private void InitializeChart()
		{
			Bar bar1 = new Bar(tChart1.Chart);
			Bar bar2 = new Bar(tChart1.Chart);

			bar1.Color = Color.Gray;
			bar1.Add(0, 500);
			bar1.Add(1, 500);
			bar1.Add(2, 500);

			bar2.Gradient.Visible = true;
			bar2.GradientRelative = false;
			bar2.Gradient.StartColor = Color.Red;
			bar2.Gradient.EndColor = Color.Green;

			bar2.Add(0, 125);
			bar2.Add(1, 350);
			bar2.Add(2, 450);

			bar2.MultiBar = MultiBars.Stacked;
		}
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

bairog
Newbie
Newbie
Posts: 52
Joined: Fri Dec 07, 2018 12:00 am

Re: Howto display two bar series one over another (one is solid color, another is gradient)

Post by bairog » Fri Dec 14, 2018 4:09 am

Christopher wrote:
Thu Dec 13, 2018 12:36 pm
bairog wrote:
Thu Dec 13, 2018 10:53 am
2) If no - how can I display two bar series one above another?
You can use the MultiBar property to stack Bar series, e.g.
It was my misprint - not one above another, but one over another. It looks like that (but green, yellow and red color is needed be gradient):
Image
Christopher wrote:
Thu Dec 13, 2018 12:36 pm
bairog wrote:
Thu Dec 13, 2018 10:53 am
1) Is there a way to implement my task with a single bar?
One possibility would be to use the ErrorBar series, e.g.
That is closer to what I need, but is has t-shaped error marker instead of solid Gray bar.

BTW Can I set _bar.ErrorPen.Color in designer (TeeChart Editor)? Didn't find that property on Series tab..

Christopher
Guru
Posts: 1192
Joined: Fri Nov 15, 2002 12:00 am

Re: Howto display two bar series one over another (one is solid color, another is gradient)

Post by Christopher » Fri Dec 14, 2018 9:51 am

bairog wrote:
Fri Dec 14, 2018 4:09 am
It was my misprint - not one above another, but one over another. It looks like that (but green, yellow and red color is needed be gradient):
Rather than actually painting one bar over another, you can paint one bar on top of another and get the same effect, e.g.

Code: Select all

		private void InitializeChart()
		{
			Bar bar2 = new Bar(tChart1.Chart);
			Bar bar1 = new Bar(tChart1.Chart);

			double[] values = new double[] { 125, 350, 450 };
			double maxValue = 500;

			bar1.Color = Color.LightGray;
			bar1.Add(0, maxValue - values[0]);
			bar1.Add(1, maxValue - values[1]);
			bar1.Add(2, maxValue - values[2]);

			bar2.Gradient.Visible = true;
			bar2.GradientRelative = false;
			bar2.Gradient.StartColor = Color.Red;
			bar2.Gradient.MiddleColor = Color.Yellow;
			bar2.Gradient.EndColor = Color.Green;

			bar2.Add(0, values[0]);
			bar2.Add(1, values[1]);
			bar2.Add(2, values[2]);

			bar1.MultiBar = MultiBars.Stacked;
		}
bairog wrote:
Thu Dec 13, 2018 10:53 am
That is closer to what I need, but is has t-shaped error marker instead of solid Gray bar.

BTW Can I set _bar.ErrorPen.Color in designer (TeeChart Editor)? Didn't find that property on Series tab..
Okay.

Yes, this is possible using the 'Border' button:
devenv_2018-12-14_10-35-16.png
devenv_2018-12-14_10-35-16.png (46.84 KiB) Viewed 1277 times
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

bairog
Newbie
Newbie
Posts: 52
Joined: Fri Dec 07, 2018 12:00 am

Re: Howto display two bar series one over another (one is solid color, another is gradient)

Post by bairog » Fri Dec 14, 2018 10:28 am

Christopher wrote:
Fri Dec 14, 2018 9:51 am
Rather than actually painting one bar over another, you can paint one bar on top of another and get the same effect, e.g.
Ahh, that was so easy... I should have guessed by myself. Thank you.
bairog wrote:
Thu Dec 13, 2018 10:53 am
Yes, this is possible using the 'Border' button:
I didn't noticed that option because setting it doesn't change errorBar appearance at design time (only after rebuilding). Changing all other properties affect appearance at design time immediately. Thanks.

Post Reply