Styling the Resource Data chart data

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

Explains how to control Resource Data charts rendering using CSS and Java.

Overview

Describes how each resource in a Resource Data chart is represented and rendered.

Selector patterns

Describes the objects that are defined to reference the Resource Data chart data model.

Attributes of model objects

Describes attributes defined for the series and point model object types.

CSS classes

Describes how properties are used to identify the CSS class an object belongs to.

Properties

Explains the properties you can use to customize the rendering of data series and data points.

Properties for data series

Describes how to modify the bean properties of a renderer that displays the corresponding data set.

Overview

Each resource displayed by the Resource Data chart is represented by a data series that consists of individual data points. Style sheets can be used to specify the rendering attributes of the whole data series or single data points. This section explains the expected selector patterns for the CSS rules, in Selector patterns, and the bean properties that can be used in the declarations of these rules, in Attributes of model objects.

Selector patterns

Two CSS model object types are defined to reference the data model of Resource Data charts:

series: used to match the whole series (represented by IlvResourceDataSet instances in the data model).

point: used to match individual data points. The point model objects are direct descendants of the series model objects.

Attributes of model objects

This section presents and discusses the attributes defined for the series and point model object types.

Series model object type

The following table lists the attributes defined for the series model object type:

Bean property	Type	Description
name	String	The name of the data set, as returned by the getName method. This will be the name of the resource that the data set represents.
index	int	The index of the data set

For example, the following CSS rule sets a gradient fill on the data series for the resource named "Linus Dane":

series[name="Linus Dane"] {

color1: paleturquoise|darkblue;

}

If the resource represented by the data series implements the IlvUserPropertyHolder interface, such as the class IlvGeneralResource, the resource properties can be accessed as additional properties of the data series. Assuming that the ID of the Linus Danes series from the previous example is "LD", the following CSS rule is equivalent to the previous one:

series[id="LD"] {

color1: paleturquoise|darkblue;

}

Point model object type

The following table lists the attributes defined for the point model object type.

Bean property	Type	Description
x	int	The x-value of the data point, as returned by the getXData method.
y	int	The y-value of the data point, as returned by the getYData method.
index	int	The index of the data point in the data set.
label	String	The label of the data point, as returned by the getDataLabel method.

Here are a few examples of selector patterns that use attribute matching:

// Matches the series representing the resource named "Gill Hopper".

series[name="Gill HopperSales"] { ... }

// Matches all the series, except the first one.

series[index<>"0"] { ... }

// Matches all data points with a y-value greater than 1.

point[y>1]{ ... }

// For the series representing the resource named "Bob Robertson",

// matches the data points whose y-value

// is greater than 1. The '>' transition is used to denote that

// point is a child of series.

series[name="Bob Robertson"] > point[y>1] { ... }

By using model indirection, you can reference the attributes on the right side of a declaration. Remember that if the resource implements the IlvUserPropertyHolder interface, such as the IlvGeneralResource class does, the properties of the resource are available as additional properties of the data series.

For example, suppose that each resource defines an overloadColor attribute. You can then define the following rule:

// For all data points with a y-value greater than 1, assign a color

// equal to the value of the resource ‘overloadColor’ property.

point[y>1] {

color1: @overloadColor;

}

Note that you can also reference the attributes of a series and its resource within the declarations of a point model object.

CSS classes

The CSS engine of the Resource Data chart interprets the tags property of an IlvGeneralResource instance, or of any resource that implements the IlvUserPropertyHolder interface, as the space-separated list of the CSS classes it belongs to. For example, if the data model defines a tags value of "Europe" for some of the resources, you can then specify the following rule that will color all data series that represent resources which are members of the "Europe" class in a different color:

series.Europe {

color1 : red;

}

This is similar to the way the Gantt and Schedule charts interpret the tags property of activities that implement the IlvUserPropertyHolder interface. This is discussed in the IlvGeneralActivity CSS classes.

Properties

Discusses the properties which you can use to customize the rendering of data series and data points. Properties for the point model objects are also available for series model objects.

The following table shows the properties for data points.

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

Colors

The color1 property corresponds to the primary color and color2 to the secondary color.

The meaning of these colors depends on whether the point is displayed by a filled renderer (see isFilled):

For renderers that are filled, the primary color corresponds to the fill color and the secondary color corresponds to the stroke color.

For renderers that are not filled, the primary color corresponds to the stroke color and the secondary color is not used. However, it is set as the fill color of the IlvStyle instance used by the renderer.

Stroke style

The stroke that is used by the graphical representation of a data point can be specified either:

by setting the stroke property.

You can do this by using an @-construct to reference a java.awt.Stroke instance,

by setting the various line attributes: endCap, lineJoin, lineStyle, lineWidth and miterLimit.

NOTE If the stroke property is set, these properties are ignored.

For example, the following rules are equivalent:

series {

lineWidth: 2;

endCap: CAP_ROUND;

lineJoin: JOIN_ROUND;

}

and:

series {

stroke: @=stroke1;

}

Subobject#stroke1 {

class : 'java.awt.BasicStroke(lineWidth, endCap, lineJoin)';

lineWidth : 2;

endCap : CAP_ROUND;

lineJoin : JOIN_ROUND;

}

Visibility

The visible property allows you to toggle the visibility of data points. For example:

// Hide the series whose resource is "CPU #1".

series[name="CPU #1"] {

visible: false;

}

// For all series, hide the points whose y-value is negative.

point[y < 0] {

visible: false;

}

Annotation

The annotation property lets you connect an instance of IlvDataAnnotation to a data point. For information on data annotations, see Annotations in Developing with the SDK for JViews Charts.

The following example shows a rule that associates an icon with a set of data points.

// For the "CPU #1" series, set an icon on the points

// whose y-value is greater than 50.

series[name="CPU #1"] > point[y>50] {

annotation: @=upperAnnotation;

}

Subobject#upperAnnotation {

    class: 'ilog.views.chart.graphic.IlvDefaultDataAnnotation(URL, position, offset)';

URL: url('gif/ok.gif');

position: NORTH;

offset: 2;

}

Properties for data series

As shown in the previous examples, the series model object selects data series based upon attributes of the series or the resource it represents. The bean properties that are styled by the series rule can belong to either the data points of the series or to the IlvChartRenderer instance that displays the series. On top of the data point properties, the series model object can be used to modify the bean properties of the renderer that displays the corresponding data set. The Resource Data chart default renderer is an instance of IlvStairChartRenderer. For example, you can define the following rule:

// Specify that the series whose resources have a "hidden" CSS class are not

// displayed by the legend.

series.hidden {

visibleInLegend: false;

}

For information on the available properties, please refer to the documentation of the IlvChartRenderer class and its subclasses in the Java API Reference Manual.

NOTE 	Properties specified in a rule using the series model object usually override the settings specified by the chartRenderer model object.