Android CircularGauge green line color affects ticks color

TeeChart for Java (NetBeans, Eclipse, Android Studio, etc)
Post Reply
Eliana
Newbie
Newbie
Posts: 16
Joined: Tue May 06, 2014 12:00 am

Android CircularGauge green line color affects ticks color

Post by Eliana » Fri May 23, 2014 1:11 pm

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
Site Admin
Site Admin
Posts: 8737
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Android CircularGauge green line color affects ticks color

Post by Yeray » Mon May 26, 2014 9:26 am

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);
		}
	}
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Eliana
Newbie
Newbie
Posts: 16
Joined: Tue May 06, 2014 12:00 am

Re: Android CircularGauge green line color affects ticks color

Post by Eliana » Wed May 28, 2014 11:37 am

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
Site Admin
Site Admin
Posts: 8737
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Android CircularGauge green line color affects ticks color

Post by Yeray » Wed May 28, 2014 1:42 pm

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?
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Eliana
Newbie
Newbie
Posts: 16
Joined: Tue May 06, 2014 12:00 am

Re: Android CircularGauge green line color affects ticks color

Post by Eliana » Thu May 29, 2014 7:59 am

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 4495 times
gauge_portrait1.png
gauge_portrait1.png (54.46 KiB) Viewed 4492 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
Site Admin
Site Admin
Posts: 8737
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Android CircularGauge green line color affects ticks color

Post by Yeray » Thu May 29, 2014 12:00 pm

Hello,

You may be interested on reading the discussion here, where the limitations on the gradients in CircularGauges are exposed.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Eliana
Newbie
Newbie
Posts: 16
Joined: Tue May 06, 2014 12:00 am

Re: Android CircularGauge green line color affects ticks color

Post by Eliana » Thu May 29, 2014 1:40 pm

ok, thanks for the feedback

Post Reply