skip to main content
Charts > Programmer's documentation > Developing with the JViews Charts SDK > Styling > Styling the data objects
 
Styling the data objects
Describes the treemap chart renderer, which is used to show data objects (as opposed to data points in the other renderers).
*Selector Patterns
*Explains the expected selector patterns for the style rules and the properties that can be used in the declarations of these rules.
*Properties
*Lists the properties that can be used to customize the rendering of data models and data objects.
Selector Patterns
Style sheets can be used to specify the rendering attributes of all objects together and of individual objects.
Two types of style rule selectors are defined to reference the chart data model:
*objects
Used to match the entire data source (an IlvTreeTableDataSource ).
*object
Used to match an object in the data model (available through IlvTreeTableDataSource.getTreeModel() ).
CSS Classes and Pseudo Classes
Every object in the data model can be associated with one or more CSS classes and with one or more pseudoclasses.
Both kinds of classes can have an effect on the rendering, through style rules. But while CSS classes are meant to encode properties of the object that come directly from the model, the pseudoclasses are meant to encode application dependent state, for example in conjunction with some interactors.
The CSS classes of model objects are taken from the model. For this purpose, the renderer has methods setCSSClassesColumn and setCSSClassesColumnName, that let you specify the model column containing the CSS classes. The value in this column should be a string containing the CSS class names, in any order, and separated by spaces.
CSS classes can be used in a CSS file through the syntax:
 
object.classname { ... }
The CSS pseudoclasses of model objects are stored in the chart instance. You can add or remove a pseudoclass to an object (or an object to a pseudoclass) through the methods IlvChart.addPseudoClass and IlvChart.removePseudoClass. There are no predefined pseudoclasses for model objects so far. You can define your own and use them in style rules.
For example, in an interactor you might mark an object as "marked":
// Add the "marked" state to an object.
 
chart.addPseudoClass(object, "marked");
Then you can define a rule that highlights the marked objects:
 
object:marked { ... }
Selector Attributes
No attributes are defined for the objects selector.
The attributes defined for the object selector are exactly the column names of the object model. For example, if the model has two columns named 'amount2004' and 'amount2005', you can write a style rule
 
object[ amount2005 > amount2004 * 1.05 ]
to highlight those object where the amount increase is greater than 5%.
Additionally, the following attributes are predefined for the object selector:
 
Name
Description
level
The distance of the object from the model root, in the tree model. This is 0 for the root, 1 for the root children, and so on.
focusLevel
The distance of the treemap renderer focus (= the root of the subtree model being displayed) from the model root.
leaf
true if the object has no children objects in the model, false otherwise.
For a treemap display, the CSS expression @level-@focusLevel represents the level difference between the current object and the outermost displayed rectangle.
The following lines of CSS can therefore be used to set labels with particular attributes on each object of the specified level:
 
object [level==0] {
  annotation : "@#labelAnnotation0";
}
object [level==1] {
  annotation : "@#labelAnnotation1";
}
object [level>1] {
  annotation : "@#labelAnnotation2";
}
Likewise for specified levels relative to the treemap focus:
 
object [@|@level-@focusLevel==0] {
  annotation : "@#labelAnnotation0";
}
object [@|@level-@focusLevel==1] {
  annotation : "@#labelAnnotation1";
}
object [@|@level-@focusLevel>1] {
  annotation : "@#labelAnnotation2";
}
Properties
Properties for Individual Data Objects
NOTE Properties for the object selector are also available for the objects selector.
In rules with an object selector, the following properties are available:
 
Name
Type
Default Value
color1
java.awt.Paint
null
color2
java.awt.Paint
null
endCap
int (enumerated)
java.awt.BasicStroke.CAP_BUTT
lineJoin
int (enumerated)
java.awt.BasicStroke.JOIN_BEVEL
lineStyle
float[]
null
lineWidth
float
1
miterLimit
float
10
stroke
java.awt.Stroke
null
annotation
IlvDataAnnotation
null
visible
boolean
true
For more details on these properties, see Properties for Data Points.
Properties for the Entire Data Model
In a rule with an objects selector, the following properties can be set through CSS.
*Object properties that apply to all objects. The list is the same as above.
*Renderer properties. For the treemap, the following properties are available:
Name
Type
Default value
Description
visible
boolean
true
Indicates whether the renderer is visible.
name
String
null
The name of the renderer.
visibleInLegend
boolean
true
Indicates whether the renderer creates legend items.
areaColumnName
String
null
The column chosen to determine the area of each object.
colorColumnName
String
null
The column chosen to determine the color of each rectangle.
labelColumnName
String
null
The column chosen to determine the label of each object, as shown by IlvDataLabelAnnotation.
CSSClassesColumnName
String
null
The column chosen to determine the CSS classes of each object.
packing
enumerated: ALTERNATING, SQUARIFIED_CORNER, SQUARIFIED, BAR
ALTERNATING
The rectangle packing.
primaryDirection
enumerated: RIGHT, LEFT, TRAILING, TOP, BOTTOM
TRAILING
The primary direction of arrangement of the rectangles.
secondaryDirection
enumerated: RIGHT, LEFT TRAILING, TOP, BOTTOM
BOTTOM
The secondary direction of arrangement of the rectangles.
leadingMarginProportion
double, between 0 and 1
0.02
Leading margin proportion.
maximumLeadingMargin
double
2
Maximum leading margin, in pixels.
trailingMarginProportion
double, between 0 and 1
0.01
Trailing margin proportion.
maximumTrailingMargin
double
2
Maximum trailing margin, in pixels.
bottomMarginProportion
double, between 0 and 1
0.02
Bottom margin proportion.
maximumBottomMargin
double
2
Maximum bottom margin, in pixels.
topMarginProportion
double, between 0 and 1
0.05
Top margin proportion.
maximumTopMargin
double
30
Maximum top margin, in pixels.
marginReductionFactor
double, between 0 and 1
1.0
Describes the margin proportions of a nested rectangle, compared to the margin proportions of the rectangle that contains it.
useMarginsOnRoot
boolean
true
Indicates whether margins also apply to the outermost rectangle.
focusParentMarginProportion
double, between 0 and 1
0.02
Focus parent margin proportion.
maximumFocusParentMargin
double
5
Maximum focus parent margin, in pixels.
colorScheme
enumerated: CONSTANT, DEPTH, SEQUENTIAL, SEQUENTIAL_HUE, CYCLIC_SEQUENTIAL_HUE, QUALITATIVE, DIVERGING_RED_GREEN, DIVERGING_GREEN_RED, DIVERGING_BLUE_YELLOW, DIVERGING_YELLOW_BLUE, AVERAGE_RED_GREEN, AVERAGE_GREEN_RED, AVERAGE_BLUE_YELLOW, AVERAGE_YELLOW_BLUE
CONSTANT
The color scheme.
colorForNaN
Color
#AAAAAA
The color used when a value in the color column is NaN.
strokeThreshold
int
0
The minimum size of a rectangle, under which the stroke of a rendering style is not used.
annotation
IlvDataAnnotation
null
An annotation for all the tree nodes.
labelAlignmentX
enumerated: LEFT, CENTER, RIGHT, LEADING, TRAILING
LEADING
The horizontal alignment of each label within the rectangle to which it belongs.
labelAlignment Y
enumerated: BOTTOM, CENTER, TOP
TOP
The vertical alignment of each label within the rectangle to which it belongs.
labelFormat
java.text.Format
null
The format for labels associated with rectangles.
annotationClipping
boolean
true
Indicates whether annotations are clipped to fit in their corresponding rectangle.
annotationVisibility
non-negative integer or one of ALL, SMART, NONE
ALL
The visibility mode for annotations.
legendLabelFormat
java.text.Format
null
The format for labels associated with colors in the legend.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.