0

See the image below. The gradient is painted incorrectly, and the vertical black lines are just ugly.

  1. How do I create a gradient that stretches from min to max? E.g. If I have a scale from 0 to 100 I want my area to use N of these 0..100 gradient values.
  2. How do I remove the vertical black lines?

Bad gradient

UPDATE: The provided answer works, except that I get this artifact:

Artifact

UPDATE 2: This only happens when using ONE LinearLayout as shown below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/chart_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="3dip" >

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Then the TChart is added to chart_layout. Bam! Offset error :)

4
  • Sorry, but I have forgotten ask you, if you could explain us what do you want achieve exactly, because we are clear what is your objective. Thanks, Commented Dec 27, 2012 at 14:18
  • I want the gradient to fade from minimum to maximum (0 to 100 in this case). So in the image above, points at 80 would have the 80th gradient color (almost green). Points at 50 would have the 50th gradient color (yellow). I believe you need a new gradient type: SYMMETRICRECTGRADIENT.
    – l33t
    Commented Dec 27, 2012 at 19:34
  • This is easily produced in Excel. Just create an area chart with a linear gradient fill color. Also, it supports multiple stops for the gradient. That's also a must-have :/
    – l33t
    Commented Dec 27, 2012 at 19:38
  • I've added the possibility to have multiple "stops" in a gradient to the wish list to be implemented in future releases (TJ71016471).
    – Yeray
    Commented Jan 3, 2013 at 15:21

2 Answers 2

1

How do I create a gradient that stretches from min to max? E.g. If I have a scale from 0 to 100 I want my area to use N of these 0..100 gradient values.

I want the gradient to fade from minimum to maximum (0 to 100 in this case). So in the image above, points at 80 would have the 80th gradient color (almost green). Points at 50 would have the 50th gradient color (yellow). I believe you need a new gradient type: SYMMETRICRECTGRADIENT

The Area series draws the segments one before the next, and the area below each segment with each of these segments. That's why the Area series can't draw a uniform gradient. However, the other versions of TeeChart have the GradientRelative that does what you request when it's set to false. I've added to the wish list the possibility to implement this property (and the functions associated) to the Java version (TJ71016477).

In the meanwhile, you could use the SeriesBand tool to do it. Here it is an example:

    tChart1.getAspect().setView3D(false);
    tChart1.getLegend().setVisible(false);

    Area area1 = new Area(tChart1.getChart());
    area1.fillSampleValues();
    area1.setOrigin(0);
    area1.setUseOrigin(true);
    area1.getAreaLines().setVisible(false);
    
    area1.getGradient().setVisible(false);
    area1.setColor(Color.transparent);
    
    SeriesBand band1 = new SeriesBand(tChart1.getChart());
    band1.setSeries(area1);
    band1.getGradient().setVisible(true);
    band1.getGradient().setDirection(GradientDirection.VERTICAL);
    band1.getGradient().setStartColor(Color.green);
    band1.getGradient().setMiddleColor(Color.yellow);
    band1.getGradient().setUseMiddle(true);
    band1.getGradient().setEndColor(Color.red);

This is what I get with the code above:

Area with SeriesBand tool to show a uniform gradient

UPDATE: I've reproduced the strange artifact issue. I've added to the wish list to be further investigated (TJ71016541). In the meanwhile, using a second LinearLayout just for the chart seems to work fine.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="3dip" >

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout 
        android:id="@+id/chart_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" />
</LinearLayout>

Another way around this, as said in the comments, is hiding the area line and making visible the SeriesBand pen:

area1.getLinePen().setVisible(false);
band1.getPen().setVisible(true);
10
  • Ok, almost works. The gradient looks nice, but I get a black border above the area. Actually, above the entire control. I'll post an image showing this error. I did try this: band.getPen().setVisible(false); but no success...
    – l33t
    Commented Jan 3, 2013 at 22:38
  • Also, SeriesBand does not work for Bar series! Nothing is drawn for one column and for multiple columns it draws some triangles...
    – l33t
    Commented Jan 3, 2013 at 22:57
  • I've edited the answer showing what I get here. I see no strange lines. Maybe you are using some different code?
    – Yeray
    Commented Jan 4, 2013 at 9:52
  • Regarding the Bar series, please, create a new question since I think it will be a bit different. And please show what would be the expected result.
    – Yeray
    Commented Jan 4, 2013 at 9:56
  • I believe the offset is caused by other controls above the TChart. Hence, if you add a button above the chart you should see this artifact. It's definitely a bug...
    – l33t
    Commented Jan 4, 2013 at 15:40
0

How do I create a gradient that stretches from min to max? E.g. If I have a scale from 0 to 100 I want my area to use N of these 0..100 gradient values.

I am afraid isn't possible do it using 0...100 gradients depending the scale, so the gradient of area is distributed throughout area using start, middle and end colors to draw the gradient.

How do I remove the vertical black lines?

To remove the vertical black lines, you only need set false the Area lines.

I hope will helps.

Thanks,

2
  • The lines are gone. Thanks :) Regarding the gradient, this is a must-have! Any chance this can be implemented or do I need to purchase the source code and implement it myself?
    – l33t
    Commented Dec 25, 2012 at 20:20
  • Try with a SeriesBand tool. I'll post a more complete reply.
    – Yeray
    Commented Jan 3, 2013 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.