Styling Resource Data chart components

Gantt > Programmer's documentation > Developing with the JViews Gantt SDK > Styling > Styling Resource Data chart components

Describes the CSS properties and Java methods used to control Resource Data chart rendering.

Overview

Describes the Resource Data chart component and its subcomponents.

Styling the Chart Area component

Explains how to use the chartArea model object to control the appearance of a portion of a chart.

Styling the Chart Legend

Explains how the chartLegend model object type to control the appearance of the Chart Legend.

Styling the chart renderer

Describes how to use the chartRenderer CSS model object to control the global appearance of the renderer used by the chart.

Styling the chart scales

Explains how to reference a specific scale in a CSS rule.

Styling the chart grids

Explains how to reference a specific grid in a CSS rule.

Overview

You can also use style sheets to customize the appearance of the Resource Data chart component and its subcomponents. These chart components are explained in more detail in The Resource Data chart bean. The following table lists the CSS model object types that are defined to reference the different parts of the chart component.

CSS Model Object Type	CSS ID	Description	Target Object Class
chart	Chart	The Resource Data chart component	IlvResourceDataChart
chartArea	chartArea	The chart area component	IlvChart.Area
chartLegend	chartLegend	The chart legend	IlvLegend
chartRenderer	chartRenderer	The chart renderers	IlvChartRenderer
chartScale	timeScale yScale	The chart scales	IlvTimeScale IlvScale
chartGrid	xGrid yGrid	The chart grids	IlvGanttGridRenderer IlvGrid

NOTE Chart components have no assigned CSS classes or pseudoclasses

The chart model object type identifies the Resource Data chart component and can be used to control the global appearance of the chart. The following table lists the bean properties of the IlvResourceDataChart class that can be set in the declarations of a CSS style rule.

Bean properties	Type
antiAliasing	boolean
antiAliasingText	boolean
background	Color
border	Border
chartAreaBorder	Border
dataRangePolicy	IlvDataRangePolicy
decorations	List
defaultColors	Color[]
footer	JComponent
footerText	String
foreground	Color
header	JComponent
headerText	String
interactors	IlvChartInteractor
legend	IlvLegend
legendPosition	String
legendVisible	boolean
maxVisibleTime	Date
minVisibleTime	Date
plotAreaBackground	Color
renderer	IlvChartRenderer
resourceDisplayMode	int
scalingFont	boolean
timeScale	IlvTimeScale
visibleDuration	IlvDuration
visibleTime	Date
xGrid	IlvGanttGridRenderer
yAxisReversed	boolean
yGrid	IlvGrid
yGridVisible	boolean
yScale	IlvScale
yScaleTitle	String
yScaleTitleRotation	double
yScaleVisible	boolean

For example, the following CSS rules show you how to control the header, the borders, and the colors of the chart:

chart {

opaque : true;

foreground : black;

background : lightyellow;

plotAreaBackground : slateblue;

border : @#chartBorder;

header : @#header;

}

Subobject#chartBorder {

class : 'javax.swing.border.LineBorder(lineColor)';

lineColor : black;

}

Subobject#header {

class : 'javax.swing.JLabel';

text : "My Resource Chart";

}

The CSS ID of the Chart Component is the same as its CSS model object type. Therefore, the following CSS rule is equivalent to the first rule above. Here, the ID of the chart component, instead of its type, is specified as the selector for the rule:

#chart {

opaque : true;

foreground : black;

background : lightyellow;

plotAreaBackground : slateblue;

border : @#chartBorder;

header : @#header;

}

Styling the Chart Area component

The chartArea model object type identifies the Chart Area component and can be used to control the appearance of the portion of the chart.

The following table lists the bean properties of the IlvChart.Area class that can be set in the declarations of a CSS style rule.

Bean properties	Type
background	Color
backgroundPaint	Paint
border	Border
bottomMargin	int
filledPlottingArea	boolean
foreground	Color
font	Font
leftMargin	int
opaque	boolean
plotBackground	Paint
plotStyle	IlvStyle
rightMargin	int
topMargin	int

For example, the following CSS rules show you how to control the borders of the chart area:

chartArea {

border : @#emptyBorder;

}

Subobject#emptyBorder {

class : 'javax.swing.border.EmptyBorder(borderInsets)';

borderInsets : 6,6,6,6;

}

The CSS ID of the Chart Area component is the same as its CSS model object type. Therefore, the following CSS rule is equivalent to the first rule above. Here, the ID of the chart area component, instead of its type, is specified as the selector for the rule:

#chartArea {

border : @#emptyBorder;

}

Styling the Chart Legend

The chartLegend model object type identifies the Chart Legend and can be used to control its appearance. The following table lists the bean properties of the IlvLegend class that can be set in the declarations of a CSS style rule.

Bean properties	Type
antiAliasing	boolean
antiAliasingText	boolean
border	Border
background	Color
floating	boolean
floatingLayoutDirection	int
followChartResize	boolean
font	Font
foreground	Color
interactive	boolean
location	Point
movable	boolean
paintingBackground	boolean
symbolSize	Dimension
symbolTextSpacing	int
title	String
transparency	int

For example, the following CSS rules show you how to control the text and symbol rendering, and the interactive docking capability of the chart legend:

chartLegend {

antiAliasing : true;

antiAliasingText : true;

font : 'Arial,plain,10';

symbolSize : "12,12";

movable: true;

}

The CSS ID of the Chart Legend is the same as its CSS model object type. Therefore, the following CSS rule is equivalent to the rule above. Here, the ID of the chart legend, instead of its type, is specified as the selector for the rule:

#chartLegend {

antiAliasing : true;

antiAliasingText : true;

font : 'Arial,plain,10';

symbolSize : "12,12";

movable: true;

}

Styling the chart renderer

The chartRenderer CSS model object type can be used to control the global appearance of the renderer used by the chart. The Resource Data chart supports a single renderer at index 0. The chartRenderer model object type defines an index attribute with value 0 that allows you to select the renderer for styling. The default renderer of the chart is an instance of IlvStairChartRenderer. For example, the following rule changes the mode of the renderer:

chartRenderer[index=0] {

autoTransparency : true;

mode : SUPERIMPOSED;

}

Styling the chart scales

There are two ways to reference a specific scale in a CSS rule. You can use:

the axisIndex attribute of the chartScale CSS model object type. This index equals -1 for the x-axis, 0 for the y-axis.

the timeScale CSS ID for the x-axis and the yScale CSS ID for the y-axis.

X-axis scale

The default x-axis scale is an instance of the class IlvGanttTimeScale. It can be selected using the chartScale[axisIndex="-1"] model object type selector or the #timeScale ID selector. The bean properties of the class IlvTimeScale that can be set in the declarations of a CSS style rule are discussed in Styling Gantt and Schedule chart components.

NOTE 	If you replace IlvGanttTimeScale with your own IlvTimeScale subclass, the CSS will return the properties of your own subclass.

Y-axis scale

The y-axis scale is an instance of the class IlvScale. It can be selected using the chartScale[index="0"] model object type selector or the #yScale ID selector. The following table lists the bean properties of the IlvScale class that can be set in the declarations of a CSS style rule.

Property	Type	Allowed values
annotations	IlvScaleAnnotation
autoCrossing	boolean
autoWrapping	boolean
axisStroke	Stroke
axisVisible	boolean
category	boolean
crossingValue	double
drawOrder	int
foreground	Color
labelAlignment	int	LEFT, CENTER, RIGHT
labelColor	Color
labelFont	Font
labelOffset	int
labelRotation	float
labelVisible	boolean
majorTickSize	int
majorTickVisible	boolean
minorTickSize	int
minorTickVisible	boolean
skipLabelMode	int	CONSTANT_SKIP,ADAPTIVE_SKIP
skippingLabel	boolean
stepsDefinition	IlvStepsDefinition
tickLayout	int	TICK_INSIDE, TICK_OUTSIDE,TICK_CROSS
title	String
titleOffset	int
titlePlacement	int
titleRotation	float
visible	boolean

Styling the chart grids

There are two ways to reference a specific grid in a CSS rule. You can use:

the axisIndex attribute of the chartGrid CSS model object type. This index equals -1 for the x-axis, 0 for the y-axis.

the xGrid and yGrid CSS IDs.

X-axis grid

The default x-axis grid is an instance of IlvWeekendGrid. It can be selected using the chartGrid[axisIndex="-1"] model object type selector or the #xGrid ID selector. The bean properties of the IlvWeekendGrid class that can be set in the declarations of a CSS style rule are discussed in Styling Gantt and Schedule chart components.

NOTE 	If you replace IlvWeekendGrid with your own IlvGanttGridRenderer implementation, the CSS will return the properties of your own subclass.

Y-axis grid

The y-axis grid is an instance of IlvGrid. It can be selected using the chartGrid[index="0"] model object type selector or the #yGrid ID selector.

The following table lists the bean properties of the IlvGrid class that can be set in the declarations of a CSS style rule:

Property	Type
drawOrder	int
majorLineVisible	boolean
visible	boolean
minorLineVisible	boolean
majorStroke	Stroke
majorPaint	Paint
minorStroke	minorPaint