In this section: How to: |
The colorMode property defines the color mode for drawing chart risers and markers. In the default configuration (bySeries), risers and markers in a series are colored according to the values specified by the series:color property. The default values are series: 0, color: red, series: 1, color: green, series: 2, color: orange. This property can be used to apply different color modes to the chart risers and markers. Some color modes are not applicable or sensible for some chart types. For example, the waterfall charts properties define colors for positive risers and negative risers.
colorMode: { mode: 'mstring', colorList: ['cstring',...'cstring'] },
where:
Is a string that defines the chart color mode. Valid values are:
For byHeight, byInterpolation, and byInterpolationAlt color modes, is an array of colors defined by a color name or numeric specification string. If only one color is specified for byHeight, byInterporation, or byInterpolationAlt, a lighter version of that color is used as an implicit second color. The default value is undefined.
The following request uses the default color mode (bySeries):
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US BY PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH VBAR ON GRAPH SET STYLE * *GRAPH_JS border:{width:2, color:'teal'}, legend: {visible:false}, series: [ {series: 'all', border: {width: 1, color: 'grey'}}, {series: 0, color: 'red'}, {series: 1, color: 'teal'}, {series: 2, color: 'yellow'}, {series: 3, color: 'cyan'} ] *END INCLUDE=ENIADefault_combine.sty,$ ENDSTYLE END
On the output, each series has its own color, and that color is repeated for each group (PRODUCT_CATEGORY):
The following version of the request changes the color mode to byGroup:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
colorMode: {mode: 'byGroup'},
series: [
{series: 'all', border: {width: 1, color: 'grey'}},
{series: 0, color: 'red'},
{series: 1, color: 'teal'},
{series: 2, color: 'yellow'},
{series: 3, color: 'cyan'}
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
On the output, all series in each group (PRODUCT_CATEGORY) are colored the same. Group 0 uses the color set for series 0, group 1 uses the color set for series 1, and so on. When the series colors are used up, default colors are used:
Next, change the color mode to byHeight and add a color list:
colorMode: { mode: 'byHeight', colorList: ['red', 'yellow','lightgreen'] }
On the output, the risers are colored using a gradient such that the first color is at the numeric axis minimum, the last color is at the numeric axis maximum, and the remaining colors are interpolated between these:
The next request generates a pie chart with the color mode byInterpolation with a color list:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
colorMode: {mode: 'byInterpolation',colorList: ['red','tan', 'yellow']} ,
*END
ENDSTYLE
END
On the output, the first series is colored the first color in the colorList array, the last series is colored the last color, and the series in between are interpolated accordingly:
Changing the color mode to byInterpolationAlt generates the following chart, in which the colors have been interpolated and shuffled:
How to: |
When the colorMode property is set to 'byInterpolation' or 'byHeight', the colorModeColors property defines the range of colors to apply to risers and markers.
colorModeColors: ['string',...,'string']
where:
Is an array of color strings defined by a color name or numeric specification string. The default value is undefined.
The following request generates a vertical bar chart with color mode 'byHeight' and colorModeColors red, yellow, and light green:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
colorMode: 'byHeight',
colorModeColors: ['red', 'yellow','lightgreen'],
series: [
{series: 'all', border: {width: 1, color: 'grey'}},
{series: 0, color: 'red'},
{series: 1, color: 'teal'},
{series: 2, color: 'yellow'},
{series: 3, color: 'cyan'}
]
*END
ENDSTYLE
END
On the output, the colors are used to generate a gradient fill for the risers in which the first color is at the numeric axis minimum, the last color is at the numeric axis maximum, and the remaining colors are interpolated between these:
In the following request, the color mode is 'byInterpolation', and the color mode colors are bisque and teal:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
colorMode: 'byInterpolation',
colorModeColors: ['bisque', 'teal'],
series: [
{series: 'all', border: {width: 1, color: 'grey'}},
{series: 0, color: 'red'},
{series: 1, color: 'teal'},
{series: 2, color: 'yellow'},
{series: 3, color: 'cyan'}
]
*END
ENDSTYLE
END
On the output, the first series is colored the first color in the array, the last series is colored the last color, and the series in between are interpolated accordingly:
WebFOCUS |