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 WFLITE
SUM COGS_US
BY MODEL
WHERE PRODUCT_CATEGORY EQ 'Computers'
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
blaProperties: {lineConnection: 'curved'},
yaxis: {
colorBands: [
{start: 0,stop: 1000, color: 'yellow'},
{start: 1000,stop: 2000,color: 'lightgreen'},
{start: 2000,stop: 3000,color: 'pink'},
{start: 3000,stop: 4000,color: 'lightblue'},
{start: 4000,stop: 5000,color: 'antiquewhite'},
{start: 5000,stop: 6000,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: '00%',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 WFLITE
SUM COGS_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Computers'
ON GRAPH HOLD 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:
Information Builders |