Example

Changing the default zoom level

Zoom levels go from 0 to 18 with 0 being the most zoomed out level and 18 being the most zoomed in.

Showing the map layer underneath

The map layer can also be shaded meaning that it does not have to be displayed at full opacity of 1.0 but slightly less shaded with the white background shining through

Open

in this example the background is not at full opacity therefore appearing not as strong of a contrast

configuring a Map

To display a topological map, after having added the topo chart type, click on settings and then insert the script given below, modifying the “mapCode“ with the code of the map as it appears in the database.

Or in a drilldown all maps have to be handed to the map via the layers object.

For more info on how to create a drilldown on a topo Chart go here How to create a drilldown

configuring the border

When displaying a topo map it can be desired to have a certain color or width for the borders between the individual elements.

custom fill color

To have a single custom fill color configure the property “customFillColor“ and give it the html color code. The map will show different shades of that color as background for its elements depending on the value of the element (i.e. 1000 as value being a stronger shade than 10).

You can set the maximum opacity for this custom color shading with

custom color range

If the colors provided by the theme or a single custom color are not enough the map can be given an array containing multiple colors including the range (start) of each.

example

Open

Topo Chart configuration

A Topo Chart compares values based on predefined areas (e.g. countries or states). It should be used when you want to show the spatial distribution of a category.

Create custom color coding scheme

The topo chart will mark areas that have different values with shades of a single color based on the default theme as you can see in the example on top of this page. If you prefer to use a different color, you can easily change it with the following configuration: customFillColor: '#ff0000'

You can also use several custom colors and assign thresholds to them.

Here is an example of the JSON code snippet that you need to add to the topo chart configuration:

Log scale the colors

sometimes when using the default colors from the theme or shadings of a single specific color it can be desired to log scale these colors. For example when we have extreme differences between the values in two areas the area with the lower value would almost be completely white or transparent due to being so much smaller than the other. Log scaling helps here by scaling the data first when obtaining the colors from the theme.

Map legend

The topo chart has a map legend that explains the color coding based on either the default/custom color or the custom data thresholds that you have set. To display the legend, add the following line to the topo chart configuration:

Legend Title

To have a title for a Legend you have to define the property “legendTitle“ and give it a localized value of your choosing.

Legend labelling

You can choose to label your thresholds as text instead of numeric values. For example, say that you want to label your legend with low, medium, high this would look as follows:

The property “title“ defines a localized value for title. The property “en“ in this object stands for English. This labeling is only possible for manually a manually defined color palette not for “customFillColor“ or automatic color scheming (no color property).

Configuring the Tooltips

Tooltip templates can be given to make the tooltip on hover show the information desired. The information is handed via a variable called dataItem. It is basically a single item returned from the aggregation.

aggregation result example:

If your items returned from the aggregation have a variable called result (see example above) then the template could look like the following:

Disabling zoom and/or drag