How to: |
The marker properties define the size, border color, shape, and rotation of series markers.
series: [ { series: snumber, group: gnumber, // optional marker: { visible: boolean, // Line Charts Only color: 'cstring' size: sznumber, shape: 'sstring', rotation: rnumber, position: 'pstring', fillMode: 'fstring', border: {width: bwnumber,color: 'bcstring',dash: 'bdstring'} } } ]
where:
Is a zero-based series number. If the series does not exist in the chart, the property is ignored.
Is an optional zero-based group number. If the group does not exist in the chart, the property is ignored. If a group number is not specified, the marker definition is applied to all risers in the series.
Controls the visibility of markers in line charts only. Valid values are:
Is a color for the marker, defined by a color name or numeric specification string, or a gradient defined by a string.
For information about defining colors and gradients, see Colors and Gradients.
Is a number that defines the size of the marker in pixels.
Is a string that defines the shape of markers for a series. Valid values are:
Note that bar, circlePlus, circleMinus, cross, and tick markers require a border width and color.
Is a number between 0 and 360 that defines the angle (in degrees) of the marker.
For bullet charts only, defines the position of the marker relative to data text. Valid values are:
Defines the marker fill mode. Valid values are;
Is a number that defines the width of the border in pixels.
Is a color for the marker border defined by a color name or numeric specification string.
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.
Note:
The following request against the GGORDER data source generates a scatter chart with different marker shapes:
GRAPH FILE GGORDER PRINT QUANTITY AS 'Quantity' ACROSS PRODUCT_CODE WHERE PRODUCT_CODE EQ 'B144' WHERE QUANTITY LT 51 ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH SCATTER ON GRAPH SET STYLE * *GRAPH_JS border: {color: 'navy'}, legend: {visible: false}, series: [ {series: 0, color: 'red', marker: {shape:'arrow', size: 20}}, {series: 1, color: 'green', marker: {shape:'fiveStar', size: 20}}, {series: 2, color: 'blue', marker: {shape:'hourglass', size: 20}}, {series: 3, color: 'yellow', marker: {shape:'triangle', size: 20}}, {series: 4, color: 'orange', marker: {shape:'diamond', size: 20}}, {series: 5, color: 'cyan', marker: {shape:'house', size: 20, rotation:45}}, {series: 6, color: 'teal', marker: {shape:'circlePlus', size: 20, border:{width:1, color:'navy'}}}, {series: 7, color: 'steelblue', marker: {shape:'sixStar', size: 20}}, {series: 8, color: 'darkblue', marker: {shape:'pirateCross', size: 20}}, {series: 9, color: 'darkgrey', marker: {shape:'pin', size: 20}}, ] *END ENDSTYLE END
On the output, note that the house marker shape is rotated 45 degrees, and that the circlePlus marker shape has a border width and color, as required:
In the following request, series 0 has the fill mode seriesHollow, and series 1 has the fill mode seriesWhite. In each case a border is required:
GRAPH FILE GGSALES SUM DOLLARS UNITS BY PRODUCT WHERE CATEGORY EQ 'Gifts' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH VLINE ON GRAPH SET STYLE * *GRAPH_JS border: {width: 2, color: 'teal'}, chartFrame: { fill: { color: 'antiquewhite' }, border: { width: 2, color: 'blue', dash: '2 2' } }, blaProperties: {lineConnection: 'curved'}, series: [ {series: 0, color: 'red', marker: {border:{color:'red',width:1},shape:'square', size:20,fillMode: 'seriesHollow'}}, {series: 1, color: 'green', marker:{border:{color:'green',width:1}, shape:'circle', size: 20,fillMode: 'seriesWhite'}}, ] *END ENDSTYLE END
The output is:
The following request generates a bullet chart and sets the positions of the markers:
DEFINE FILE GGORDER YEARY/YY = ORDER_DATE; YEAR1/YY = IF YEARY EQ 1990 THEN 1998 ELSE YEARY; END GRAPH FILE GGORDER SUM QUANTITY BY YEAR1 ON GRAPH SET VAXIS 80 ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH CUSTOM ON GRAPH SET STYLE * *GRAPH_JS chartType: 'bullet', border: {width:1, color:'navy'}, bulletProperties: {drawFirstValueAsBar: false}, dataLabels: {visible: true, font: '6pt'}, yaxis: { colorBands: [ {start: 0,stop: 200000,color: 'silver'}, {start: 2100000,stop: 400000,color: 'lightgrey'}, {start: 400000,stop: 600000,color: 'whitesmoke'}, ], }, series: [ {series: 'all', showDataValues: true}, {series: 0, group: 0, color: 'blue', marker: {size: 15, position: 'bottom'}}, {series: 0, group: 1, color: 'red', marker: {size: 15, position: 'top'}}, {series: 0, group: 2, color: 'yellow', marker: {size: 15, position: 'middle'}} ] *END INCLUDE=ENIADefault_combine.sty,$ ENDSTYLE END
On the output, the yellow marker is positioned in the middle of the data text, the red marker is above the data text, and the blue marker is below the data text:
WebFOCUS |