ADF Graphs Configurations

In this post I will show how you can make some configurations on ADF graphs.

1- Change Y-axis minimum vale

Sometimes you need to start Y-axis by specific value (by default it start by 0) but what if you need Y-axis start by 20 or 50 or .... you can do the following:

Settings:

In the graph component insert dvt:y1Axis  and from property inspector set AxisMinValue by the the desire value or by expression and set AxisMinAutoScaled to false

The Result will be like this:

2- Remove decimal from pie slice label(display integer values) 

Settings:

Result:

3- Change X-axis fonts and color

Settings:

Result:

4- Change Y-axis fonts and color

Settings:

Result:

5- Rotate X-axis text 

Settings:

Result:

5- Pie display value 

Settings:

Result:

6- Pie display percentage

Settings:

Result:

7- Change Pie Slice label text fonts and colors

Settings:

Result:

8 - Pie change Legend text fonts and colors

Settings:

Result:

9- Pie select multiple slices

Settings:

Result:

To read selected value you can use this code

	public String getPieSelectedSliceAction() // button action
	{
	Set<GraphSelection> selectionSet = (Set<GraphSelection>) accountTypePie.getSelection();
	if(selectionSet == null)
	{
	Util.showErrorMessage("Please select one or more pie slice.");
	return null;
	}
	for (GraphSelection selection: selectionSet)
	{
	if (selection instanceof DataSelection)
	{
	DataSelection ds = (DataSelection) selection;
	Object selectedKey = ds.getSeriesKey().get("AttributeName");
	System.out.println("selectedKey= " + selectedKey);
	}
	}
	return null;
	}

view raw multipleSelect.java hosted with ❤ by GitHub

10- Hide graph tooltip

Settings:

Note: You can use MarkerTooltipType and SeriesTooltipLabelType properties to display/hide some information from graph tooltip

Result:

11- Display a horizontal line inside bar graph

Sometime we need to display a horizontal line in bar graph the line value will be a specific value to know which bar value will be above the line and which will be below the line value.

To do that insert inside dvt:barGraph --> referenceObjectSet --> referenceObject

as

	<dvt:barGraph ....>
	<dvt:referenceObjectSet>
	<dvt:referenceObject text="Alert Range" color="#940000"
	location="RO_FRONT" shortDesc="True Cost Price (#{bindings.TrueCostPrice1.inputValue})"
	lineValue="#{bindings.TrueCostPrice1.inputValue}" lineWidth="2"/>
	</dvt:referenceObjectSet>
	.
	.
	.
	</dvt:barGraph>

view raw reference.xml hosted with ❤ by GitHub

Settings:

Result:

12- Change bubble graph background and vert/horiz lines color

The original graph will be like this 

You can fill the graph by set dvt:graphPlotArea fillColor="#bac5d6" and fillTransparent="false" as

<dvt:graphPlotArea fillColor="#bac5d6" fillTransparent="false"/>

view raw b.xml hosted with ❤ by GitHub

the result will be like

if you want to change the color of the vertical and horizontal lines you can change it by adding dvt:y1MajorTick and dvt:x1MajorTick inside  as

	<dvt:y1MajorTick lineColor="#ff2121"/>
	<dvt:x1MajorTick lineColor="#ff2121"/>

view raw bub.xml hosted with ❤ by GitHub

the result will be like:

If you want to hide all vertical and horizontal lines set dvt:y1MajorTick and dvt:x1MajorTick as

	<dvt:y1MajorTick tickStyle="GS_NONE"/>
	<dvt:x1MajorTick tickStyle="GS_NONE"/>

view raw bubble.xml hosted with ❤ by GitHub

The result will be

13- Formatting Metric and Tick Labels for a Gauge

the metric and tick labels are by default displaying their values as e.g "2.0K". Also, the metric label is displayed below the gauge which takes unnecessary vertical space.

if you want to display the values like 2000 instead of 2.0K :

Settings:

set gauge tickLabel and metricLabel scaling="none"

	<dvt:tickLabel scaling="none"/>
	<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL" scaling="none"/>

view raw gauge.xml hosted with ❤ by GitHub

Result:

14- Display bar values of dvt:barGraph in the top of each bar

Inside the bar add dvt:markerText like:

	<dvt:barGraph id="barChart1" ....>
	<dvt:markerText rendered="true">
	<dvt:y1Format>
	<af:convertNumber type="number"/>
	</dvt:y1Format>
	<dvt:graphFont id="graphFont4" size="12"/>
	</dvt:markerText>
	</dvt:barGraph>

view raw barTop.xml hosted with ❤ by GitHub

Result:

15- Add currency symbol beside gauge value

To add currency symbol beside gauge value add inside gauge dvt:metricLabel and inside it add  dvt:numberFormat as:

	<dvt:gauge id="g1" ..>
	<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL" scaling="none">
	<dvt:numberFormat numberType="NUMTYPE_CURRENCY" currencySymbol="€"/>
	</dvt:metricLabel>
	</dvt:gauge>

view raw gaugeCurrency.xml hosted with ❤ by GitHub

Result: