FusionCharts v3 Documentation

Using Color Range to define data range and colors

In our previous population example, when we were providing data for each entity of the world map, we were not distinguishing each entity based on colors. Effectively, this didn't enhance the visual interpretation of data. But, FusionMaps allows you to use color ranges to distinguish various entities based on their data.

Using color range, you can classify your data into sections, with each section having a different name and color to differentiate from each other. These sections are called color ranges. For each color range, you'll have to specify the minimum and maximum values, and the hex color code for the range.

Let's say we wanted to divide the World Continent Population into three groups as under:

Population	Name
0-500 Million	Sparsely Populated
500-1000 Million	Well Populated
Over 1000 Million	Densely Populated

From our above table, we can clearly define three color ranges as under:

0-500
500-1000
1000-5000 (we assume 5000 to be the maximum possible value for the given data)

Now, for each color range, we can select the following properties:

MinValue – Lower limit (data value) from where this color range starts. For example, 0 is minValue for first color range and 500 is minValue for second.
MaxValue – Upper limit (data value) from where this color range ends. For example, 500 is maxValue for first color range and 1000 for second one.
Color Range Name (displayValue) – which will be added to the map legend to aid interpretation of data. In our above example, "Sparsely Populated", "Well Populated" and "Densely Populated" are the names of the three color ranges. This attribute is optional – if you do not specify the displayValue for a specific color range, it'll show the range value instead (e.g., 500-1000).
Hex Color Code – Each color range is denoted by a unique color. All the entities on the map whose data value fall within the given color range assume the same color as that of the applicable color range. You need to provide hex color codes without #.
Alpha – You can also set the alpha (transparency) for color range to highlight data.

Each color range should have its own unique range value, displayValue and color.

Let's now implement the color range concept in our World Population Map. We'll follow the above defined range and color "Sparsely Populated" continents in green, "Well Populated" continents in yellow and "Densely Populated" continents in red.

To do so, create a new XML file named as ColorRange.xml, with the following XML data:

The only difference in this data (from the previous one) is the introduction of new <colorRange> and <color> elements. The <colorRange> element encapsulates the definition of all color range. And, individual color ranges are defined using the <color> element which can assume the following attributes:

minValue – Lower limit of range
maxValue – Upper limit of range
displayValue – Text representation of range (to be shown in legend)
color – Hex color code (without #) for the range
alpha – Transparency (0-100) for the entities belonging to that range

Here, we've defined our 3 color ranges in the XML. When you now view the map, you'll see the following results:

Bingo! - As you can see above, each continent has been colored according to its data value (which falls in one of the defined ranges). Also, a legend has now appeared on the map indicating the string representation of each color range. You can customize the properties of this legend using various attributes of <map> element described in "XML Attributes" section.

Note: If any entity's data doesn't fall into any of the defined color range, it takes the color defined in fillColor attribute of <map> element (or it's default value if this attribute is also not defined).