Page 1 of 1

Android CircularGauge green line color affects ticks color

Posted: Fri May 23, 2014 1:11 pm
by 17069151
Hi,

I'm trying to set a gradient color on the green-red line of the circular gauge. However, when using the following code, the major ticks color also changes to the color of the green line gradient.
If I don't use a gradient color on the green line, then the major ticks are displayed with the color (white_smoke) defined in the code. How can I solve this issue?

Also, is there a way to start a gradient color at a specific gauge value, i.e. start yellow color when value = 60?

Code: Select all

circularGauge1 = new CircularGauge(chart.getChart());
circularGauge1.setMinimum(0);
circularGauge1.setMaximum(110);
circularGauge1.getAxis().setIncrement(10);
circularGauge1.getAxis().setMinorTickCount(4);
circularGauge1.setValue(60);

circularGauge1.getTicks().setColor(Color.WHITE_SMOKE);
circularGauge1.getTicks().setVertSize(10);
circularGauge1.getTicks().setHorizSize(4);

circularGauge1.getVertAxis().getMinorTicks().setVisible(true);
circularGauge1.getMinorTicks().setColor(Color.WHITE_SMOKE);
circularGauge1.getMinorTicks().setVertSize(2);
circularGauge1.getMinorTicks().setHorizSize(2);

circularGauge1.setGreenLineStartValue(0.0);
circularGauge1.setGreenLineEndValue(100.0);

circularGauge1.getGreenLine().setVertSize(1);
circularGauge1.getGreenLine().getPen().setVisible(false);
  		
circularGauge1.setRedLineStartValue(100.0);
circularGauge1.setRedLineEndValue(110.0);
circularGauge1.getRedLine().getGradient().setVisible(false);
circularGauge1.getRedLine().setColor(Color.RED);
circularGauge1.getRedLine().setVertSize(1);//
circularGauge1.getRedLine().getPen().setVisible(false);

circularGauge1.getGreenLine().getGradient().setDirection(GradientDirection.BACKDIAGONAL);
circularGauge1.getGreenLine().getGradient().setUseMiddle(true);
circularGauge1.getGreenLine().getGradient().setStartColor(Color.green);
circularGauge1.getGreenLine().getGradient().setMiddleColor(Color.yellow);
circularGauge1.getGreenLine().getGradient().setEndColor(Color.orange);



Many thanks,
E.

Re: Android CircularGauge green line color affects ticks color

Posted: Mon May 26, 2014 9:26 am
by yeray
Hello Eliana,

I've been able to reproduce the problem and found how to fix it.
I see you are source code customer so you can apply the fix in your version of the sources.
In CircularGauge.java, change the draw() method for this:

Code: Select all

	public void draw() {
		if ((chart != null) && (getAxis() != null)) {
			setValues();
			drawFrame();
			Graphics3D g = (Graphics3D) prepareGraphics(getNonVisiblePen(), getFaceBrush());
			drawFace(g);
			g = (Graphics3D) prepareGraphics(getAxis().getAxisPen(), new ChartBrush(chart));
			drawAxis(g);
			drawNGauge(g);
			drawLGauge(g);
			g = (Graphics3D) prepareGraphics(getNonVisiblePen(), getHand().getBrush());
			drawHand(g);
		}
	}

Re: Android CircularGauge green line color affects ticks color

Posted: Wed May 28, 2014 11:37 am
by 17069151
Hi Yeray,

Thanks for the change, the problem is solved but I need some more help on the following issue related to the circular gauge.

I have a scale showing values on the gauge from 0 to 110.
I need to show a gradient color line under the gauge that starts from green, goes to orange and at the end gets red.
Preferable, I would like to setup the gradient at only the green line and not use the red line so I will get a smooth transition from one color to the other.

How can I control the position of each gradient color? for example, I need the red color to start at value 100 and end at 110.
Also, I need the gradient color that covers a certain value area to be the same when the screen is in portrait or landscape view. Currently, I get
a different total gradient color when in portrait or landscape (i.e. in landscape i get more red than what it is shown on the portrait view).

Thank you in advance,
E.

Re: Android CircularGauge green line color affects ticks color

Posted: Wed May 28, 2014 1:42 pm
by yeray
Hi Eliana,
Eliana wrote:I have a scale showing values on the gauge from 0 to 110.
I need to show a gradient color line under the gauge that starts from green, goes to orange and at the end gets red.
Preferable, I would like to setup the gradient at only the green line and not use the red line so I will get a smooth transition from one color to the other.

How can I control the position of each gradient color? for example, I need the red color to start at value 100 and end at 110.
I'm afraid the gradients can't be controlled at this level yet. The VCL and .NET versions have redesigned the Gradients adding support to set the position of each color in a list of colors to draw the multi-colored gradient.
This is still pending in TeeChart Java though:
http://bugs.teechart.net/show_bug.cgi?id=784
Eliana wrote:Also, I need the gradient color that covers a certain value area to be the same when the screen is in portrait or landscape view. Currently, I get
a different total gradient color when in portrait or landscape (i.e. in landscape i get more red than what it is shown on the portrait view).
I'm not sure to understand what are differences are you observing between landscape and portrait views. Could you please attach some image showing it?

Re: Android CircularGauge green line color affects ticks color

Posted: Thu May 29, 2014 7:59 am
by 17069151
Hi Yeray,

Here is an example of what I said about the differences at the gradient color.
The images show how the gradient looks at the landscape and portrait view.
gauge_landscape1.png
gauge_landscape1.png (60.59 KiB) Viewed 4486 times
gauge_portrait1.png
gauge_portrait1.png (54.46 KiB) Viewed 4483 times
Following is the main code I have used to setup the gradient.

circularGauge1.setGreenLineStartValue(0.0);
circularGauge1.setGreenLineEndValue(110.0);

circularGauge1.getRedLine().setVisible(false);

circularGauge1.getGreenLine().getGradient().setDirection(GradientDirection.BACKDIAGONAL);
circularGauge1.getGreenLine().getGradient().setUseMiddle(true);
circularGauge1.getGreenLine().getGradient().setStartColor(Color.green);
circularGauge1.getGreenLine().getGradient().setMiddleColor(Color.yellow);
circularGauge1.getGreenLine().getGradient().setEndColor(Color.red);

BR,
E.

Re: Android CircularGauge green line color affects ticks color

Posted: Thu May 29, 2014 12:00 pm
by yeray
Hello,

You may be interested on reading the discussion here, where the limitations on the gradients in CircularGauges are exposed.

Re: Android CircularGauge green line color affects ticks color

Posted: Thu May 29, 2014 1:40 pm
by 17069151
ok, thanks for the feedback