As opposed to marker gradients, background gradients are
used for cosmetic purposes only. In other words, background
gradients are only used to enhance the chart's visual appearance
and have no direct relation to the data contained in the chart.

In Chart FX for Java, gradients can be applied to 2
rectangular areas in the chart area: The chart's inside
background and the main background.
Chart FX for Java allows horizontal, vertical, diagonal
and radial gradients when applying gradient fills to
either of these areas of the chart.
In order to create background gradients, you can use
the Chart FX for Java Wizard, or you can use Chart FX for Java objects and its properties to create and display
gradient fills.
By default, the color in a linear gradient changes
uniformly. However, in this chapter you will learn how
to use the Chart FX for Java API so you can create and
customize linear gradients so that the color may change
in a non-uniform fashion.
Creating a gradient object
Creating a gradient object is no more than instantiating
an object from the ChartFX.Borders.dll called GradientBackground.
The following code creates a new variable and instantiates
a new gradient object:
GradientBackground myGradient = new GradientBackground(GradientType.BACKWARD_DIAGONAL);
|
Please note the GradientBackground object constructor receives
a parameter indicating the type of gradient you want to create.
Your development environment InstelliSense feature should
help you choose your desired gradient effect.
Assigning the gradient object to any of the chart backgrounds
Once you have created the gradient object you can set
properties like colors and positions. This topic is covered
in detail in the following sections. Once these properties
have been set, you will need to assign the gradient object
to the appropriate chart background.
To assign the gradient to the chart inside background, your code will look as follows:
GradientBackground myGradient = new GradientBackground(GradientType.FORWARD_DIAGONAL); chart1.setInsideBackObject(myGradient);
|
Or, to assign the gradient to the chart main background, you
will use the BackObject and it is important you remember to
set the Inside background to a transparent color so the gradient
is visible across the entire chart area, as follows:
GradientBackground myGradient = new GradientBackground(GradientType.FORWARD_DIAGONAL); chart1.setBackObject(myGradient); chart1.setInsideColor(java.awt.Color(0,0,0,0));
|
Manipulating gradient colors, positions
Once the gradient object has been instantiated, you can manipulate
the object's properties to set visual attributes like colors,
positions and color intensity. The following section will
show you how to create multicolor and bi-color gradients.
Essentially, a gradient object provides a Color array property
that you can use to set the colors you want for your gradient.
These colors will then be uniformly blended in the chart's
background by dividing the bounding rectangle into equal sections
and blending from one color to another in the Color array.
For example, you can set the following color array for your
gradient:
GradientBackground myGradient = new GradientBackground(GradientType.FORWARD_DIAGONAL); // Filling the color array myGradient.setColor(0, java.awt.Color.blue); myGradient.setColor(1, java.awt.Color.red); myGradient.setColor(2, java.awt.Color.yellow); myGradient.setColor(3, java.awt.Color.green); chart1.setInsideBackObject(myGradient);
|

The preceding code, if applied to the chart's inside
background will create a Forward Diagonal gradient with
3 regions that will blend uniformly:
1) from Blue to Red
2) from Red to Yellow
3) from Yellow to Green
If this arrangement is not convenient, you may alter
the positions of each blending area by using the Position
array supported by the GradientBackground object.
To understand how positions work in the bounding rectangle,
imagine the first position (where the gradient starts) as
position 0; the ending position would then be 1 and then intermediate
positions would be fractions between 0 and 1.
For example, in our previous example if we wanted the gradient
from blue to red to occupy only 10% of the bounding rectangle
and the gradient from Red to Yellow to fill 70% of the area,
we could have used the Position array as follows:
GradientBackground myGradient = new GradientBackground(GradientType.FORWARD_DIAGONAL);
myGradient.setColor(0, java.awt.Color.blue); myGradient.setColor(1, java.awt.Color.red); myGradient.setColor(2, java.awt.Color.yellow); myGradient.setColor(3, java.awt.Color.green);
myGradient.setPosition(0, 0); myGradient.setPosition(1, 0.1); myGradient.setPosition(2, 0.8); myGradient.setPosition(3, 1); chart1.setInsideBackObject(myGradient);
|
Bi-Color Gradients
In some cases, you may want to work with bi-color gradients
and simply repeat a gradient pattern across the chart's background.
If this is the case, instead of defining a Color array with
the 2 same colors over and over, you can simply create a bi-color
gradient.
A bi-color gradient requires Position and Factor
(color intensity) arrays to display a repeating pattern across
the chart's background. Previously we described the effect
the Position array had on the gradient. In bi-color gradients
a new Factor array must be defined to instruct Chart FX for
Java on the color intensity on each position.

To understand the Factor array, consider that the values it takes are a fraction
between the 2 colors in the color array. If set to 0,
then the resulting color will be the color available
in the position 0 of the Color array and similarly with
a value of 1.
For example take a closer look at the Factor array and the
effect it creates on the gradient in the following 2 samples:

myGradient.setColor(0, java.awt.Color.white); myGradient.setColor(1, java.awt.Color.blue); myGradient.setPosition(0, 0); myGradient.setPosition(1, (float) 0.25); myGradient.setPosition(2, (float) 0.75); myGradient.setPosition(3, 1); myGradient.setFactor(0, 0); myGradient.setFactor(1, 1); myGradient.setFactor(2, 0); myGradient.setFactor(3, 1);
|

myGradient.setColor(0, java.awt.Color.white); myGradient.setColor(1, java.awt.Color.blue); myGradient.setPosition(0, 0); myGradient.setPosition(1, (float) 0.25); myGradient.setPosition(2, (float) 0.75); myGradient.setPosition(3, 1); myGradient.setFactor(0, 0); myGradient.setFactor(1, (float) 0.8); myGradient.setFactor(2, (float) 0.9); myGradient.setFactor(3, 0);
|
Please note the Factor array does not apply to multicolor
gradients (3 or more colors).
|