Custom Entity IDs | FusionCharts

All maps in FusionCharts Suite XT have pre defined unique internal IDs to reference each entity. Based on your use case you might want to name these entities differently. You can solve this problem by creating custom IDs for entities on a map. Apart from re-defining identities, you can also re-define the short name and long name of each identity, and use these as the label or tooltip of the map.

Let’s work with a simple example of population map by continents. The table below shows the population numbers for the different continents. It also has columns for the “FusionCharts Internal ID” for each continent and a custom defined Desired ID.

Continent	Desired ID	FusionCharts Internal ID	Population (in millions)
North America	NAM	NA	515
South America	SAM	SA	373
Europe	EUR	EU	727
Africa	AFR	AF	885
Asia	ASI	AS	3875
Australia	AUS	AU	32

In this example, we want to rename the internal ID for North America from NA to NAM and for South America from SA to SAM and so on.

This can be done by defining new IDs for entities within the entitydef array as part of the dataSource of the map.

The data structure of a world map with new IDs set is shown below

JSON
XML

{ "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "useSNameInToolTip": "1", "useSNameInLabels": "1" }, "entityDef": [ { "internalId": "NA", "newId": "NAM" }, { "internalId": "SA", "newId": "SAM" }, { "internalId": "EU", "newId": "EUR" }, { "internalId": "AS", "newId": "ASI" }, { "internalId": "AF", "newId": "AFR" }, { "internalId": "AU", "newId": "AUS" } ], "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D1D9C5", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#C9DEA9", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#5A9502", "displayValue": "> 1B" } ] }, "data": [ { "id": "NAM", "value": "515" }, { "id": "SAM", "value": "373" }, { "id": "ASI", "value": "3875" }, { "id": "EUR", "value": "727" }, { "id": "AFR", "value": "885" }, { "id": "AUS", "value": "32" } ] }

{
    "chart": {
        "caption": "Global Population",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1",
        "useSNameInToolTip": "1",
        "useSNameInLabels": "1"
    },
    "entityDef": [
        {
            "internalId": "NA",
            "newId": "NAM"
        },
        {
            "internalId": "SA",
            "newId": "SAM"
        },
        {
            "internalId": "EU",
            "newId": "EUR"
        },
        {
            "internalId": "AS",
            "newId": "ASI"
        },
        {
            "internalId": "AF",
            "newId": "AFR"
        },
        {
            "internalId": "AU",
            "newId": "AUS"
        }
    ],
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D1D9C5",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#C9DEA9",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#5A9502",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NAM",
            "value": "515"
        },
        {
            "id": "SAM",
            "value": "373"
        },
        {
            "id": "ASI",
            "value": "3875"
        },
        {
            "id": "EUR",
            "value": "727"
        },
        {
            "id": "AFR",
            "value": "885"
        },
        {
            "id": "AUS",
            "value": "32"
        }
    ]
}

With the newly defined custom entity IDs, the map looks like this:

FusionCharts will load here..

When defining new IDs for different entities on the map, ensure that you’re referring to the right original internal ID. Also ensure that the redefined entity IDs are unique.

The full HTML code to build the example is shown here

<html>
<head>
    <title>A Data Driven Map</title>
    <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
    <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function() {
    var populationMap = new FusionCharts({
        type: 'maps/world',
        renderAt: 'chart-container',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Global Population",
                "theme": "fint",
                "formatNumberScale": "0",
                "numberSuffix": "M",
                "showLabels": "1",
                "useSNameInToolTip": "1",
                "useSNameInLabels": "1"
            },
            "entityDef": [{
                "internalId": "NA",
                "newId": "NAM"
            }, {
                "internalId": "SA",
                "newId": "SAM"
            }, {
                "internalId": "EU",
                "newId": "EUR"
            }, {
                "internalId": "AS",
                "newId": "ASI"
            }, {
                "internalId": "AF",
                "newId": "AFR"
            }, {
                "internalId": "AU",
                "newId": "AUS"
            }],
            "colorrange": {
                "color": [{
                    "minvalue": "0",
                    "maxvalue": "100",
                    "code": "#D0DFA3",
                    "displayValue": "< 100M"
                }, {
                    "minvalue": "100",
                    "maxvalue": "500",
                    "code": "#B0BF92",
                    "displayValue": "100-500M"
                }, {
                    "minvalue": "500",
                    "maxvalue": "1000",
                    "code": "#91AF64",
                    "displayValue": "500M-1B"
                }, {
                    "minvalue": "1000",
                    "maxvalue": "5000",
                    "code": "#A9FF8D",
                    "displayValue": "> 1B"
                }]
            },
            "data": [{
                "id": "NAM",
                "value": "515"
            }, {
                "id": "SAM",
                "value": "373"
            }, {
                "id": "ASI",
                "value": "3875"
            }, {
                "id": "EUR",
                "value": "727"
            }, {
                "id": "AFR",
                "value": "885"
            }, {
                "id": "AUS",
                "value": "32"
            }]
        }
    }).render();
});
</script>
</head>
<body>
    <div id="chart-container">A world map will load here!</div>
</body>
</html>

This is what we did in the above data structure

Created a map instance of type maps/world in the populationMap variable. We set the height and width of this map. Also the dataType was set to json.
Set the caption of the map to “Global Population” and applied the fint (FusionCharts Internal) theme to control the cosmetic properties of the map. The formatNumberScale , showLabels and numberSuffix attributes were used to specify the formatting of the labels.
Used the entityDef object to specify a newID for each internaID.
Used the colorrange object to define progressive coloring associated with a numeric data range.
Specified the tabular data within the data array, referenced by the newly defined newID.