In this section: How to: |
The colorScale property defines the colors to use for drawing the color scale for heatmap, treemap, and tagcloud charts.
You can also visualize the color transitions in a heatmap as discrete bands. For information, see Defining a Discrete Color Scale for Heatmap and Choropleth Charts.
colorScale: { colors: ['color1', 'color2', ..., 'colorn'] },
where:
Is an array of colors defined by a color name or numeric specification string. The default value is: ['#253494', '#2C7FB8', '#41B6C4', '#A1DAB4'].
The following request generates a heatmap chart with a color scale consisting of the colors lime green, cyan, teal, and green:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US AS 'Revenue'
GROSS_PROFIT_US AS 'Profit'
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH SPECTRAL
ON GRAPH SET STYLE *
*GRAPH_JScolorScale: {colors: ['limegreen','cyan', 'teal', 'green'] }
*END
ENDSTYLE
END
The output is:
The following request generates a treemap chart with a color scale consisting of the colors tan and antique white:
GRAPH FILE WF_RETAIL_LITE
SUM GROSS_PROFIT_US COGS_US
BY PRODUCT_CATEGORY
BY BUSINESS_REGION
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH TREEMAP
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:true},colorScale: {colors: ['tan','antiquewhite']}
*END
ENDSTYLE
END
The output is:
How to: |
Two color modes for heatmaps and choropleths define the way color transitions are visualized on the chart and in the legend.
Continuous mode is the default visualization. In continuous mode, the colors in the color scale form a blended gradient.
Discrete mode visualizes the colorScale in discrete color bands. You define an array of color bands that provide start and stop values for each color. The color bands must be defined within the colorScale object.
For discrete mode, the syntax follows.
colorScale: { colorMode:{mode: 'discrete'}, colorBands: [ { start: startval, stop: stopval, color: 'bcolor' } . . . ] }
where:
Is a number or percent string that defines where to start the color band.
Is a number or percent string that defines where to stop the color band.
Defines the color of the band.
For continuous mode, the syntax follows.
colorScale: { colorMode:{mode: 'continuous'}, colors: ['color1','color2', '..., 'colorn'] }
where:
Specify the colors to be blended.
Note: If you set the color mode to 'continuous' but define color bands, the chart will be visualized in discrete mode.
The following request defines a choropleth with discrete color bands.
GRAPH FILE WF_RETAIL_LITE SUM MDN.STATE_PROV_POPULATION BY STATE_PROV_NAME WHERE COUNTRY_NAME EQ 'United States' WHERE STATE_PROV_NAME NE 'Puerto Rico' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH CHOROPLETH ON GRAPH SET STYLE * *GRAPH_JS mapProperties: { engine: 'leaflet', leaflet: { initPos: { center: [37.8, -96], level: 4 },overlayLayers: [{ title: 'United States of America', dataLookup: 'properties.state_name', layerInfo: { maxZoom: -1, minZoom: -1, type: 'regions' }, type: 'tdg', url: function(){ return tdgchart.getScriptPath() + 'map/US.json'} }], controls: [ {control: 'L.Control.Layers'}, { control: 'L.Control.Scale', options: { imperial: true, metric: true } } ],
baselayers: [{
title: "ArcGIS_World_Street_Map",
layerInfo: {
maxZoom: 17,
minZoom: 0,
attribution: function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " +
"Map Tiles: &|copy; Esri";}
},
url: function(){ return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';}
}]
}
},
legend:{visible:true},
colorScale: {
colorMode:{mode: 'discrete'},
colorBands: [
{start: 0, stop: 8000000,color:'green'},
{start: 8000000, stop: 16000000,color:'yellow'},
{start: 16000000, stop: 24000000,color:'blue'},
{start: 24000000, stop: 38000000,color:'red'}
]
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
The chart and legend are visualized using the discrete color bands defined in the color scale, as shown on the following image:
WebFOCUS |