How to: |
An annotation is text, a marker, or both that you want to place anywhere on a chart. Multiple annotations can be defined within the annotations array.
The following shows the properties and default values for annotations:
annotations: [ position: { x: undefined, y: undefined, parent: 'background' }, marker: { visible: true, color: 'red', size: 8, shape: 'circle', rotation: 0, border: { width: 1, color: 'black', dash: '' } }, label: { visible: false, text: 'Annotation Label', font: '10pt Sans-Serif', color: 'black', position: 'center' } }, ]
annotations: [ position: { x: xvalue y: yvalue, parent: 'parentcomponent'' }, marker: { visible: amboolean, color: amcolor, size: amsize, shape: 'amshape', rotation: amrotation, border: { width: ambwidth, color: 'ambcolor', dash: 'ambdash' } }, label: { visible: alboolean, text: 'altext', font: 'alfont', color: 'alcolor', position: 'alposition' } }, . . . ]
where:
Is the horizontal position for the annotation marker. Can be:
Is the vertical position for the annotation marker. Can be:
Can be one of the following chart components:
Defines whether the annotation marker is visible. Valid values are:
Defines the color for the annotation marker, defined by a color name or numeric specification string, or a gradient defined by a string. The default value is 'red'.
Is the size, in pixels, of the annotation marker. The default value is 8.
Is a shape for the annotation marker. All valid marker shapes are supported. The default shape is 'circle'.
For a list of marker shapes, see Series-Specific Properties.
Defines the marker position relative to data text labels for bullet charts as 'top', 'bottom', or 'middle', Not supported for other types of charts.
Is a number between 0 and 360 that defines the rotation angle of the marker, in degrees.
Is a number that defines the width of the border in pixels. The default value is 1.
Is a color for the marker border defined by a color name or numeric specification string. The default value is 'black'.
Is a string that defines the border dash style. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes. The default is no dash ('').
Defines whether the annotation label is visible. Valid values are:
Defines the annotation label text. The default value is no label text.
Defines the annotation label font. The default value is '10pt Sans-Serif'.
Defines a position for the annotation label relative to the annotation marker. Valid values are:
The following request specifies two annotations. The first annotation is on the chart component. Its marker is a yellow pirate cross with a black border that is 120 pixels horizontally from the left edge of the x-axis and at the 800K point along the y-axis (which is numeric). The label is positioned below the marker. The second annotation only has a position (representing pixels), so there is no label, and it has the default marker, a red circle that is 8 pixels in size.
GRAPH FILE WF_RETAIL_LITE SUM COGS_US GROSS_PROFIT_US BY PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH VBAR ON GRAPH SET STYLE *
*GRAPH_JS annotations : [ { position: { x: '120px', y: 800000, parent: 'chart' }, marker: { visible: true, color: 'yellow', size: 30, shape: 'piratecross', rotation: 0, border: { width: 1, color: 'black', dash: '' } }, label: { visible: true, text: 'Chart annotation: x: 120px, y: 800K', font: '14pt Times New Roman', color: 'black', position: 'bottom' } }, { position: { x: 10, y: 200 } }, ] *END ENDSTYLE END
The output is:
The following request has one annotation, on series 1 and group 1. The y value is at 50% along the y-axis. The marker is a blue triangle.
GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
annotations : [
{
position: {
x: {series:1, group:1},
y: '50%',
parent: 'chart'
},
marker: {
visible: true,
color:'blue',
shape: 'triangle',
rotation: 0,
border: {
width: 1,
color: 'black',
dash: ''
}
},
label: {
visible: true,
text: 'Series annotation',
font: '10pt Times New Roman',
color: 'black',
position: 'bottom'
}
},
]
*END
ENDSTYLE
END
The output is:
The following request places a blue star over the green legend marker in the legend area.
GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {lineStyle:{color:'red'}},
annotations : [
{
position: {
x: '106px',
y: '.14px',
parent: 'legend'
},
marker: {
visible: true,
color:'blue',
shape: 'fiveStar',
rotation: 0,
border: {
width: 1,
color: 'black',
dash: ''
}}
},
]
*END
ENDSTYLE
END
The output is:
WebFOCUS |