Styling the Resource Data chart data
Explains how to control Resource Data charts rendering using CSS and Java.
Describes how each resource in a Resource Data chart is represented and rendered.
Describes the objects that are defined to reference the Resource Data chart data model.
Describes attributes defined for the series and point model object types.
Describes how properties are used to identify the CSS class an object belongs to.
Explains the properties you can use to customize the rendering of data series and data points.
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,
or
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.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.