Android CircularGauge green line color affects ticks color

[Eliana]

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.

[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);
		}
	}

[Eliana]

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.

[Yeray]

Hi Eliana,

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

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?

[Eliana]

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 (60.59 KiB) Viewed 19042 times

gauge_portrait1.png (54.46 KiB) Viewed 19039 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.

[Yeray]

Hello,

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

[Eliana]

ok, thanks for the feedback