How to: |
The colorBand properties create blocks of color that span the overall chart area.
"axisname": { "colorBands": [ { "start": startval, "stop": stopval, "color": "color" } ] },
where:
Can be:
Is a number or string that defines where on the axis to start the color band.
For a numeric axis:
For an ordinal axis:
Is a number or string that defines where on the axis to end the color band.
For a numeric axis:
For an ordinal axis:
Defines the color of the band. Can be:
For information about defining colors and gradients, see Colors and Gradients.
The following request defines color bands on the y-axis. Since the y-axis is numeric, the numbers in the color band definitions are values that appear on the y-axis:
GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY MODEL
WHERE PRODUCT_CATEGORY EQ 'Computers'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {"lineConnection": "curved"},
"yaxis": {"colorBands": [
{"start": 0, "stop": 7500, "color": "yellow"},
{"start": 7500, "stop": 15000, "color": "lightgreen"},
{"start": 15000, "stop": 22000, "color": "pink"},
{"start": 22000, "stop": 29000, "color": "lightblue"},
{"start": 29000, "stop": 37000, "color": "antiquewhite"},
{"start": 37000, "stop": 45000, "color": "limegreen"}
]}
*END
ENDSTYLE
END
The output is:
The following version of the colorBands object expresses the band start and stop properties as percentages:
"yaxis": { "colorBands": [ {"start": 0, "stop": "20%", "color": "yellow"}, {"start": "20%", "stop": "40%", "color": "lightgreen"}, {"start": "40%", "stop": "60%", "color": "pink"}, {"start": "60%", "stop": "80%", "color": "lightblue"}, {"start": "80%", "stop": "100%", "color": "antiquewhite"} ]}
The output is:
The following request generates a gauge chart and defines the color bands for the gauge axis:
GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Computers'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH GAUGE1
ON GRAPH SET STYLE *
*GRAPH_JS
"yaxis": {
"min": 0,
"max": 50,
"colorBands": [
{"start": 1, "stop": 10, "color": "red"},
{"start": 10, "stop": 20, "color": "orange"},
{"start": 20, "stop": 30, "color": "yellow"},
{"start": 30, "stop": 40, "color": "lightgreen"},
{"start": 40, "stop": 50, "color": "green"}
]}
*END
ENDSTYLE
END
The output is:
WebFOCUS | |
Feedback |