FusionCharts Logo
FusionCharts Suite v3.7.1

Loading

Custom Entity IDs

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

{ "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.

Top