Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Example of USA Chart:

FusionCharts will load here..

JavaScript embedding code:

<script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "usa",
            "dataFormat": "jsonurl",
            "dataSource": "chartdata.json"
        });
    });
</script>

Data for this chart:

{ "chart": { "caption": "Annual Sales by State", "subcaption": "Last year", "entityFillHoverColor": "#cccccc", "numberScaleValue": "1,1000,1000", "numberScaleUnit": "K,M,B", "numberPrefix": "$", "showLabels": "1", "theme": "fint" }, "colorrange": { "minvalue": "0", "startlabel": "Low", "endlabel": "High", "code": "#e44a00", "gradient": "1", "color": [ { "maxvalue": "56580", "displayvalue": "Average", "code": "#f8bd19" }, { "maxvalue": "100000", "code": "#6baa01" } ] }, "data": [ { "id": "HI", "value": "3189" }, { "id": "DC", "value": "2879" }, { "id": "MD", "value": "920" }, { "id": "DE", "value": "4607" }, { "id": "RI", "value": "4890" }, { "id": "WA", "value": "34927" }, { "id": "OR", "value": "65798" }, { "id": "CA", "value": "61861" }, { "id": "AK", "value": "58911" }, { "id": "ID", "value": "42662" }, { "id": "NV", "value": "78041" }, { "id": "AZ", "value": "41558" }, { "id": "MT", "value": "62942" }, { "id": "WY", "value": "78834" }, { "id": "UT", "value": "50512" }, { "id": "CO", "value": "73026" }, { "id": "NM", "value": "78865" }, { "id": "ND", "value": "50554" }, { "id": "SD", "value": "35922" }, { "id": "NE", "value": "43736" }, { "id": "KS", "value": "32681" }, { "id": "OK", "value": "79038" }, { "id": "TX", "value": "75425" }, { "id": "MN", "value": "43485" }, { "id": "IA", "value": "46515" }, { "id": "MO", "value": "63715" }, { "id": "AR", "value": "34497" }, { "id": "LA", "value": "70706" }, { "id": "WI", "value": "42382" }, { "id": "IL", "value": "73202" }, { "id": "KY", "value": "79118" }, { "id": "TN", "value": "44657" }, { "id": "MS", "value": "66205" }, { "id": "AL", "value": "75873" }, { "id": "GA", "value": "76895" }, { "id": "MI", "value": "67695" }, { "id": "IN", "value": "33592" }, { "id": "OH", "value": "32960" }, { "id": "PA", "value": "54346" }, { "id": "NY", "value": "42828" }, { "id": "VT", "value": "77411" }, { "id": "NH", "value": "51403" }, { "id": "ME", "value": "64636" }, { "id": "MA", "value": "51767" }, { "id": "CT", "value": "57353" }, { "id": "NJ", "value": "80788" }, { "id": "WV", "value": "95890" }, { "id": "VA", "value": "83140" }, { "id": "NC", "value": "97344" }, { "id": "SC", "value": "88234" }, { "id": "FL", "value": "88234" } ] }
{
    "chart": {
        "caption": "Annual Sales by State",
        "subcaption": "Last year",
        "entityFillHoverColor": "#cccccc",
        "numberScaleValue": "1,1000,1000",
        "numberScaleUnit": "K,M,B",
        "numberPrefix": "$",
        "showLabels": "1",
        "theme": "fint"
    },
    "colorrange": {
        "minvalue": "0",
        "startlabel": "Low",
        "endlabel": "High",
        "code": "#e44a00",
        "gradient": "1",
        "color": [
            {
                "maxvalue": "56580",
                "displayvalue": "Average",
                "code": "#f8bd19"
            },
            {
                "maxvalue": "100000",
                "code": "#6baa01"
            }
        ]
    },
    "data": [
        {
            "id": "HI",
            "value": "3189"
        },
        {
            "id": "DC",
            "value": "2879"
        },
        {
            "id": "MD",
            "value": "920"
        },
        {
            "id": "DE",
            "value": "4607"
        },
        {
            "id": "RI",
            "value": "4890"
        },
        {
            "id": "WA",
            "value": "34927"
        },
        {
            "id": "OR",
            "value": "65798"
        },
        {
            "id": "CA",
            "value": "61861"
        },
        {
            "id": "AK",
            "value": "58911"
        },
        {
            "id": "ID",
            "value": "42662"
        },
        {
            "id": "NV",
            "value": "78041"
        },
        {
            "id": "AZ",
            "value": "41558"
        },
        {
            "id": "MT",
            "value": "62942"
        },
        {
            "id": "WY",
            "value": "78834"
        },
        {
            "id": "UT",
            "value": "50512"
        },
        {
            "id": "CO",
            "value": "73026"
        },
        {
            "id": "NM",
            "value": "78865"
        },
        {
            "id": "ND",
            "value": "50554"
        },
        {
            "id": "SD",
            "value": "35922"
        },
        {
            "id": "NE",
            "value": "43736"
        },
        {
            "id": "KS",
            "value": "32681"
        },
        {
            "id": "OK",
            "value": "79038"
        },
        {
            "id": "TX",
            "value": "75425"
        },
        {
            "id": "MN",
            "value": "43485"
        },
        {
            "id": "IA",
            "value": "46515"
        },
        {
            "id": "MO",
            "value": "63715"
        },
        {
            "id": "AR",
            "value": "34497"
        },
        {
            "id": "LA",
            "value": "70706"
        },
        {
            "id": "WI",
            "value": "42382"
        },
        {
            "id": "IL",
            "value": "73202"
        },
        {
            "id": "KY",
            "value": "79118"
        },
        {
            "id": "TN",
            "value": "44657"
        },
        {
            "id": "MS",
            "value": "66205"
        },
        {
            "id": "AL",
            "value": "75873"
        },
        {
            "id": "GA",
            "value": "76895"
        },
        {
            "id": "MI",
            "value": "67695"
        },
        {
            "id": "IN",
            "value": "33592"
        },
        {
            "id": "OH",
            "value": "32960"
        },
        {
            "id": "PA",
            "value": "54346"
        },
        {
            "id": "NY",
            "value": "42828"
        },
        {
            "id": "VT",
            "value": "77411"
        },
        {
            "id": "NH",
            "value": "51403"
        },
        {
            "id": "ME",
            "value": "64636"
        },
        {
            "id": "MA",
            "value": "51767"
        },
        {
            "id": "CT",
            "value": "57353"
        },
        {
            "id": "NJ",
            "value": "80788"
        },
        {
            "id": "WV",
            "value": "95890"
        },
        {
            "id": "VA",
            "value": "83140"
        },
        {
            "id": "NC",
            "value": "97344"
        },
        {
            "id": "SC",
            "value": "88234"
        },
        {
            "id": "FL",
            "value": "88234"
        }
    ]
}

Map Attributes

Functional Attributes

These attributes let you control a variety of functional elements on the map. For example, you can opt to show/hide data values, labels etc.

chart
: {
showLabels

: Boolean

[+]

It sets the configuration whether the entity labels will be displayed or not.

Range: 0/1
includeNameInLabels

: Boolean

[+]

If you’ve opted to show map labels, this attributes lets you control whether to show entity names as a part of map labels?

Range: 0/1
includeValueInLabels

: Boolean

[+]

Whether to show entity values on the map as a part of map label?

Range: 0/1
useSNameInLabels

: Boolean

[+]

Whether to use the short name of entities in labels or full names?

Range: 0/1
useSNameInToolTip

: Boolean

[+]

Whether to use the short name of entities in tool-tip or full names?

Range: 0/1
showShadow

: Boolean

[+]

Whether to drop a shadow effect for the map?

Range: 0/1
caption

: String

[+]

Allows you to add a caption of the map.

subCaption

: String

[+]

Allows you to add a sub caption of the map.

captionPosition

: String

[+]

Allows you to set the position of the caption and sub caption. You can set the position these either on the top-left corner, top-right corner, bottom-left corner or on the bottom-right corner of the map. The default value is ‘top-center’.

Range: top-left, top-right, bottom-left, bottom-right and top-center
clickURL

: String

[+]

The entire map can act as a hotspot. Use this URL to define the hotspot link for the map. The link can be specified in FusionCharts Link Format.

hoverOnEmpty

: Boolean

[+]

Whether to show tool tip for those entities whose value has not been defined in the XML data?

Range: 0/1
aboutMenuItemLabel

: String

[+]

The menu item label for the custom context menu item.

entityLabelsOnTop

: Boolean

[+]

This attribute is used to show the entity labels above or below the markers in the maps. If 0, the entity-labels appear below the marker. By default, it is set to 1 and the entity-labels appear above the markers.

Range: 0/1
}

Map Cosmetics

The following attributes let you configure map cosmetics like background color, background alpha etc.

chart
: {
showCanvasBorder

: Boolean

[+]

Whether to show a border around entire map object.

Range: 1/0
canvasBorderColor

: Color

[+]

If you’ve opted to show a border around entire map object, this attribute lets you control the color of the border.

Range: Hex Code
canvasBorderThickness

: Number

[+]

If you’ve opted to show a border around entire map object, this attribute lets you control the thickness of the border in pixels.

Range: In Pixels
canvasBorderAlpha

: Number

[+]

If you’ve opted to show a border around entire map object, this attribute lets you control the alpha of the border.

Range: 0-100
bgColor

: Color

[+]

This attribute sets the background color for the map. You can set any hex color code as the value of this attribute.

bgAlpha

: Number

[+]

Sets the alpha (transparency) for the background.

Range: 0-100
bgRatio

: Number

[+]

If you’ve opted for a gradient background, this attribute lets you set the ratio of each color constituent.

Range: 0-100
bgAngle

: Number

[+]

Angle of the background color, in case of a gradient.

Range: 0-360
bgImage

: String

[+]

To place any image as background of the map, enter the (path and) name of the image. It should be in the same domain as the map.

bgImageAlpha

: Number

[+]

Helps you specify alpha for the loaded background image.

Range: 0-100
bgImageDisplayMode

: String

[+]

Helps you specify the mode in which the background image is to be displayed.Stretch - expands the image to fit the entire map area, without maintaining original image constraintsTile - the image is repeated as a pattern on the entire map areaFit - fits the image proportionately on the map areaFill -proportionately fills the entire map area with the imageCenter - the image is positioned at the center of the map areaNone - Default mode. None of the above modes are applied

Range: stretch, tile, fit, fill, center, none
bgImageVAlign

: String

[+]

Helps you to vertically align the background image.

Range: top, middle, bottom
bgImageHAlign

: String

[+]

Helps you to horizontally align the background image.

Range: left, middle, right
bgImageScale

: Number

[+]

Helps you magnify the background image. This attribute will only work when the attribute bgImageDisplayMode is set to none, center or tile.

Range: 0-300
logoURL

: String

[+]

You can load an external logo (JPEG/PNG/SWF) on the map once it has rendered. This attribute lets you specify the URL of the same. Owing to Flash Player security settings, you can only specify logo that are on the sub-domain as the SWF file of the map.

Range: URL
logoPosition

: String

[+]

Where to position the logo on the map:TL - Top-leftTR - Top-rightBR - Bottom rightBL - Bottom leftCC - Center of screen

Range: TL, TR, BL, BR, CC
logoAlpha

: Number

[+]

Once the logo has loaded on the map, you can configure its opacity using this atribute.

Range: 0-100
logoScale

: Number

[+]

You can also change the scale of externally loaded logo at run-time by specifying a value for this parameter.

Range: 0-300
logoLink

: String

[+]

If you want to link the logo to an external URL, specify the link in this attribute. The link can be in FusionCharts Link Format, allowing you to link to new windows, pop-ups, frames etc.

Range: URL
}

Map Entities Cosmetics

These attributes let you configure how your entities will appear on the map.

chart
: {
borderColor

: Color

[+]

Border Color for map entities

Range: Hex Code
borderAlpha

: Number

[+]

Border alpha for map entities

Range: 0-100
fillColor

: Color

[+]

Default fill color to use for entities, if no color range has been specified.

Range: Hex Code
fillAlpha

: Alpha

[+]

Alpha to be used for filling entities.

Range: 0-100
useHoverColor

: Boolean

[+]

Whether to use hover color for the map. If set to yes, whenever the end user hovers his mouse over a map entity, it will change its color to the color defined in attribute below.

Range: 0/1
hoverColor

: Color

[+]

When the end user hovers his mouse over any map entity, it changes its color. Using this attribute you can define that color.

Range: Hex Code
showBorder

: Boolean

[+]

Whether the common entity border will be displayed or not. Default value is 1.

Range: 0/1
nullEntityColor

: Color

[+]

The default color for any map entity whose values are not provided in map data.

Range: Hex Code
nullEntityAlpha

: Number

[+]

The default opacity of any map entity whose values are not provided in map data.

Range: 0-100
showEntityToolTip

: Boolean

[+]

Whether to show or hide tooltip for all entities present in a map. The default value is 1.

Range: 0/1
labelConnectorColor

: Hex code

[+]

Specifies the color of the static label connector. This attribute is used when you want to explicitly define the color of the label connector. If not set, the label connector color is taken from connectorColor attribute.

labelConnectorAlpha

: Number

[+]

Specifies the transparency of the static label connector. This attribute is used when you want to explicitly define the transparency of the label connector. If not set, the label connector alpha is taken from connectorAlpha attribute.

Range: 0-100
}

Number Formatting

chart
: {
formatNumber

: Boolean

[+]

This configuration determines whether the numbers displayed on the map will be formatted using commas, e.g., 40,000 if formatNumber=’1’ and 40000 if formatNumber=’0’

Range: 0/1
decimals

: Number

[+]

Number of decimal places to which all numbers on the map will be rounded to.

Range: 0-10
forceDecimals

: Boolean

[+]

Whether to add 0 padding at the end of decimal numbers. For example, If you limit the maximum number of decimal digits to 2, a number like 55.345 will be rounded to 55.34. This does not mean that all numbers will be displayed with a fixed number of decimal places. For instance 55 will not be displayed as 55.00 and 55.1 will not become 55.10. In order to have fixed number of decimal places attached to all the numbers, set this attribute to 1.

Range: 0/1
numberPrefix

: String

[+]

Using this attribute, you could add prefix to all the numbers visible on the map. For example, to represent all dollars figure on the map, you could specify this attribute to ‘ $’ to show like $40000, $50000. For more details, please see Advanced Number Formatting section.

Range: Character
numberSuffix

: String

[+]

Using this attribute, you could add suffix to all the numbers visible on the map. For example, to represent all figure quantified as per annum on the map, you could specify this attribute to ‘ /a’ to show like 40000/a, 50000/a. For more details, please see Advanced Number Formatting section.

Range: Character
decimalSeparator

: String

[+]

This option helps you specify the character to be used as the decimal separator in a number. For more details, please see Advanced Number Formatting section.

Range: Character
thousandSeparator

: String

[+]

This option helps you specify the character to be used as the thousands separator in a number. For more details, please see Advanced Number Formatting section.

Range: Character
thousandSeparatorPosition

: List of comma separated Numbers

[+]

This option helps you specify the position of the thousand separator. For more details, read this.

inDecimalSeparator

: String

[+]

In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give a error while converting to number. So, FusionMaps XT accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the decimal separator. For more details, please see Advanced Number Formatting section.

Range: Character
inThousandSeparator

: String

[+]

In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give a error while converting to number. So, FusionMaps XT accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the thousand separator. For more details, please see Advanced Number Formatting section.

Range: Character
formatNumberScale

: Boolean

[+]

Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it - e.g., if formatNumberScale is set to 1, 1043 will become 1.04K (with decimals set to 2 places). Same with numbers in millions - an M will added at the end. For more details, please see Advanced Number Formatting section.

Range: 0/1
defaultNumberScale

: String

[+]

The default unit of the numbers that you’re providing to the map. For more details, please see Advanced Number Formatting section.

numberScaleUnit

: String

[+]

Unit of each block of the scale. For more details, please see Advanced Number Formatting section.

numberScaleValue

: String

[+]

range of the various blocks that constitute the scale. For more details, please see Advanced Number Formatting section.

scaleRecursively

: Boolean

[+]

Whether to scale the number recursively? For more details, read this.

Range: 0/1
maxScaleRecursion

: Number

[+]

How many recursions to complete during recursive scaling? -1 completes the entire set of recursion.

scaleSeparator

: String

[+]

What character to use to separate the scales that are generated after recursion?

}

Legend Properties

If you’ve defined color ranges, the color range names appear in a legend. You can place the legend at the bottom of the map or to the right of the map.Also, using the attributes below, you can configure the functional and cosmetic properties of the legend.

chart
: {
showLegend

: Boolean

[+]

Whether to show legend for the map?

Range: 0/1
interactiveLegend

: Boolean

[+]

This attribute lets you interact with the legend in your map. When you click a legend item, the entities associated with that color range are hidden from the map. Re-clicking the legend item causes the entities to reappear.

Range: 0/1
legendAllowDrag

: Boolean

[+]

The legend can be made drag-able by setting this attribute to 1. End viewers of the map can drag the legend around on the map.

Range: 0/1
legendCaption

: String

[+]

Lets you add a caption to your legend.

reverseLegend

: Boolean

[+]

You can reverse the ordering of the legend items in the legend by setting this attribute to 1.

Range: 0/1
legendPosition

: String

[+]

The legend can be plotted at two positions on the map - below the map (BOTTOM) and on the RIGHT side of the map.

Range: BOTTOM or RIGHT
legendIconScale

: Number

[+]

Sets the magnification of legend icons. The default value is 1 which denotes 100% size.

Range: (0-5)
legendShadow

: Boolean

[+]

Whether to show a shadow for legend?

Range: 0/1
legendBgColor

: Color

[+]

Background color for the legend.

Range: Hex Code
legendBgAlpha

: Number

[+]

Background alpha for the legend.

Range: 0-100
legendBorderColor

: Color

[+]

Border Color for the legend.

Range: Hex Code
legendBorderThickness

: Number

[+]

Border thickness for the legend.

Range: In Pixels
legendBorderAlpha

: Number

[+]

Border alpha for the legend.

Range: 0-100
legendScrollBgColor

: Color

[+]

If you’ve too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the background color of the scroll bar.

Range: Hex Code
legendScrollBarColor

: Color

[+]

If you’ve too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the bar color of the scroll bar.

Range: Hex Code
legendScrollBtnColor

: Color

[+]

If you’ve too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the color of buttons of the scroll bar.

Range: Hex Code
legendPointerWidth

: Number

[+]

Allows you to set the width of the Gradient Legend pointers.

legendPointerHeight

: Number

[+]

Allows you to set the height of the Gradient Legend pointers.

legendPointerBorderThickness

: Number

[+]

Sets the border thickness of Gradient Legend pointers.

legendScaleLineColor

: Color

[+]

Sets the color of the line showing the numeric scale of Gradient Legend.

Range: Hex Code
legendScaleLineAlpha

: Number

[+]

Sets the opacity of the line showing the numeric scale of Gradient Legend.

Range: 0-100
legendScaleLineThickness

: Number

[+]

Sets the thickness of the line showing the numeric scale of Gradient Legend.

legendPointerColor

: Color

[+]

Sets the legend pointer color for a gradient legend.

Range: Hex Color Code
legendPointerAlpha

: Number

[+]

Sets the legend pointer transparency for a gradient legend.

Range: 0-100
legendPointerBorderAlpha

: Number

[+]

Sets the transparency for the legend pointer border for a gradient legend.

Range: 0-100
legendpointerbordercolor

: Color

[+]

Sets the color for the border of the legend pointer.

Range: Hex color code
}

Marker Properties

Markers are custom defined points on the map, which help you pin-point locations like cities, houses, malls, junctions etc. Using the properties listed below, you can configure the various aspects of the markers.

chart
: {
markerFont

: String

[+]

This attribute sets the font face for all the defined marker labels. You can over-ride this using STYLES.

Range: Font Name
markerFontSize

: Number

[+]

This attribute sets the font size for all the defined marker labels on the map. You can over-ride this using STYLES.

Range: 0-72
markerFontColor

: Color

[+]

This attribute sets the font color for all the defined marker labels on the map. You can over-ride this using STYLES.

showMarkerToolTip

: Boolean

[+]

Whether to show tool tips for the defined markers?

Range: 0/1
showMarkerLabels

: Boolean

[+]

You can opt to show/hide label for all the markers on the map using this attribute.

Range: 0/1
markerLabelPadding

: Number

[+]

This attribute lets you set a global label padding between the marker icon and its label. You can later over-ride the label padding for each individual marker too.

Range: Pixels
markerBgColor

: Color

[+]

This attribute lets you set a common background color for all the defined markers on the map. You can later over-ride individual marker colors by using SHAPE definitions.

markerBorderColor

: Color

[+]

This attribute lets you set a common border color for all the defined markers on the map. You can later over-ride individual marker border colors by using SHAPE definitions.

markerRadius

: Number

[+]

This attribute lets you set a common radius for all the defined markers on the map. You can later over-ride individual marker border colors by using SHAPE definitions.

Range: Pixels
connectorColor

: Color

[+]

Sets the color of the marker connectors. Also, if labelConnectorColor is not set in XML/JSON data, the same color is applied to the label connector lines (if any) on the map.

Range: Hex Code
connectorAlpha

: Number

[+]

Sets the opacity of the marker connectors. Also, if labelConnectorAlpha is not set in XML/JSON data, the same opacity is applied to the label connector lines (if any) on the map.

Range: 0-100
showHoverEffect

: Boolean

[+]

Lets you enable hover effect for this specific entity

Range: 0 / 1
fillHoverColor

: Color

[+]

Fll color for this specific marker on hover

fillHoverAlpha

: Number

[+]

Alpha for this specific marker on hover

Range: 0 - 100
fillHoverRatio

: Comma separated Numbers

[+]

Fill ratio for this specific marker on hover

Range: Sums up to 100
fillHoverAngle

: Number

[+]

Fill angle for this specific marker on hover

Range: 0 - 360
borderHoverThickness

: Number

[+]

Border thickness for this specific marker on hover

Range: In Pixels
borderHoverColor

: Color

[+]

Border color for this specific marker on hover

borderHoverAlpha

: Number

[+]

Border alpha for this specific marker on hover

Range: 0 - 100
markerConnColor - deprecated

: Color

[+]

Sets the color of the marker connectors.This attribute is deprecated. Use connectorColor instead.

Range: Hex Code
markerConnAlpha - deprecated

: Number

[+]

Sets the opacity of the marker connectorsThis attribute is deprecated. Use connectorAlpha instead.

Range: 0-100
connectorThickness or markerConnThickness - deprecated

: Number

[+]

If you’ve defined any marker connectors, this attribute lets you set the thickness of all those connectors.

Range: Pixels
showConnectorToolTip

: Boolean

[+]

Whether to show or hide tooltip for all marker connectors present in a map. The default value is 1.

Range: 0/1
connectorDashed or markerConnDashed - deprecated

: Boolean

[+]

Whether the marker connector line should appear as dashed?

Range: 0/1
connectorDashLen or markerConnDashLen - deprecated

: Number

[+]

If marker connector line is to appear as dash, this attribute lets you set the dash length of each part of dash.

Range: Pixels
connectorDashGap or markerConnDashGap - deprecated

: Number

[+]

If marker connector line is to appear as dash, this attribute lets you set the dash gap of each part of dash.

Range: Pixels
autoScaleMarkers

: Boolean

[+]

This attribute lets you to scale the markers automatically with respect to the map dimensions. By default, this attribute is set to 0.

Range: 0/1
markerFillColor

: Color

[+]

Using this attribute, you can specify the fill color for the marker shape (hex code without #). If you specify a comma separated list of hex codes (without #), FusionMaps XT will use those colors to form a gradient.

Range: 0/1
markerFillAlpha

: Number

[+]

Used to specify the fill alpha. In case of gradients, you’ll need to specify a comma separated list of alpha.

Range: 0-100
markerFillRatio

: Number

[+]

If you’re using gradient fills for the marker, this attribute lets you set the ratio (on a scale of 0-100) for the gradient component colors.

Range: 0-100
markerFillAngle

: Number

[+]

If you’re using gradient fills for the marker, this attribute lets you set the angle for the gradient.

Range: 0-360
markerBorderAlpha

: Number

[+]

Border alpha for the marker shape.

Range: 0-100
}

Attributes for <data> ... <entity> element

chart
: {
value

: Number

[+]

Numeric value of the <entity>.

displayValue

: String

[+]

If you want to display your custom value for each entity (apart from it’s long name, short name or value), you can specify it here.

toolText

: String

[+]

Lets you specify a custom tool text for the entity.

color

: Color

[+]

Lets you specify a custom color for the entity. If color range is defined, each entity takes its color from the range it belongs to. However, if you need to force a color for an entity (over-riding the range value), you can specify the hex code here.

Range: Hex Code
alpha

: Number

[+]

Custom alpha (transparency) for the entity

Range: 0-100
link

: String

[+]

If you want to link the entity to a URL, you can specify the URL in FusionCharts format. The link can open in same window, new window, pop-up, frames or as JavaScript functions.Please see the section Drill Down Maps to learn more about this.

font

: String

[+]

If you want the label of this particular entity to appear in a different font (other from the one defined in STYLES/map element), specify the font face here.

fontSize

: String

[+]

If you want the label of this particular entity to appear in a different font size (other from the one defined in STYLES/map element), specify the font size here.

fontColor

: Boolean

[+]

If you want the label of this particular entity to appear in a different font color (other from the one defined in STYLES/map element), specify the font color here.

Range: 0/1
fontBold

: Boolean

[+]

If you want the label of this particular entity to appear bold (other from the one defined in STYLES/map element), set this as 1.

Range: 0/1
showLabel

: Boolean

[+]

Whether to show the label for this entity? This attribute over-rides the value specified for showLabels attribute for <map> element.

Range: 0/1
showToolTip

: Boolean

[+]

Whether to show tooltip for the entity. Default value is 1.

Range: 0/1
labelConnectorColor

: Hex code

[+]

Sets a color to the label connector line (if any).

labelConnectorAlpha

: Number

[+]

Specifies the transparency of the label connector line (if any).

Range: 0-100
useHoverColor

: Boolean

[+]

Whether to show hover color when user hovers mouse over entity. Set this attribute to 0 to disable hover color.

Range: 0/1
}

Tool-tip

These attributes let you control the tool tip. You can set the background color, border color, separator character and few other details.

chart
: {
showToolTip

: Boolean

[+]

Whether to show tool tip on map? When this attribute is set to 0, all the tooltips including entity tooltips, marker toolitps and connector tooltips are disabled.

Range: 0/1
toolTipBgColor

: Color

[+]

Background Color for tool tip.

toolTipBorderColor

: Color

[+]

Border Color for tool tip.

toolTipSepChar

: String

[+]

The character specified as the value of this attribute separates the name and value displayed in tool tip.

showToolTipShadow

: Boolean

[+]

Whether to show shadow for tool-tips on the map.

Range: 0/1
}

<markers> element

FusionMaps XT allows user-defined markers on the map. Markers are points that you can define anywhere on the map to represent various locations like cities, junctions, houses, office locations, malls or any other entity that needs a point representation. All data pertinent to markers are defined within the <markers> element under <map> element.

Font Properties

Using the attributes below, you can define the generic font properties for the text on the map.

chart
: {
baseFont

: String

[+]

This attribute lets you set the font face (family) of all the text (data labels, values etc.) on map.

Range: Font Name
baseFontSize

: Number

[+]

This attribute sets the base font size of the map i.e., all the values and the names in the map which lie on the canvas will be displayed using the font size provided here.

Range: 0-72
baseFontColor

: Color

[+]

This attribute sets the base font color of the map i.e., all the values and the names in the map which lie on the canvas will be displayed using the font color provided here.

}

Map Padding & Margins

The following attributes help you control map margins and paddings.

chart
: {
legendPadding

: Number

[+]

Padding of legend from right/bottom side of map

Range: In Pixels
chartLeftMargin

: Number

[+]

Amount of empty space that you want to put on the left side of your map. Nothing is rendered in this space.

Range: In Pixels
chartRightMargin

: Number

[+]

Amount of empty space that you want to put on the right side of your map. Nothing is rendered in this space.

Range: In Pixels
chartTopMargin

: Number

[+]

Amount of empty space that you want to put on the top of your map. Nothing is rendered in this space.

Range: In Pixels
chartBottomMargin

: Number

[+]

Amount of empty space that you want to put on the bottom of your map. Nothing is rendered in this space.

Range: In Pixels
}

Attributes to allow exporting of map as image/PDF

These attributes allow you to control the saving of map as image.

chart
: {
exportEnabled or imageSaveURL - deprecated

: Boolean

[+]

Whether the map will allow exporting to images/PDFs?

Range: (0/1)
exportShowMenuItem

: Boolean

[+]

Whether the menu items related to export (e.g., Save as JPEG etc.) will appear in the context menu of map.

Range: (0/1)
exportFormats

: String

[+]

Lets you configure what output formats to allow for export of map, in the export context menu, and also customize the label for each menu item. The attribute value should be a pipe (|) delimited separated key-value pair. Example: exportFormat=’PNG=Export as High Quality Image|JPG|PDF=Export as PDF File’

exportHandler

: String

[+]

In case of server side exporting, this refers to the path of the server-side export handler (the ready-to-use scripts that we provide).In case of client-side exporting, this refers to the DOM-Id of FusionCharts Export component that is embedded in your web page, along with the map.

exportAction

: String

[+]

In case of server-side exporting, the action specifies whether the exported image will be sent back to client as download, or whether it’ll be saved on the server.

Range: 'save' or 'download'
exportTargetWindow

: String

[+]

In case of server-side exporting and when using download as action, this lefts you configure whether the return image/PDF will open in same window (as an attachment for download), or whether it will open in a new window.

Range: '_self' or '_blank'
exportCallback

: String

[+]

Name of JavaScript function that’ll be called back when export process has finished in case of:Client side exportBatch exportServer-side export using ‘save’ as action

exportFileName

: String

[+]

Using this attribute you can specify the name (excluding the extension) of the output (export) file.

}

<markers> ... <data> ... <marker> element

The <marker> element defines and applies individual markers using the following attributes.

chart
: {
id

: Alphanumeric

[+]

Gives an ID to the marker, to which it can be referred to in JavaScript API.

shapeId

: String

[+]

Using this attribute, you can set the shape that this marker will assume on the map already defined.

x

: Number

[+]

Relative X-position of the marker.

y

: Number

[+]

Relative Y-position of the marker.

label

: String

[+]

You can over-ride the labels for each marker during its application. This label will over-ride the label specified during definition.

labelPos

: String

[+]

Like label, you can also over-ride the label position for each marker during its application.

Range: LEFT, RIGHT, CENTER, TOP, BOTTOM
toolText

: String

[+]

If you need to provide custom tool text for a marker, you can do so using this attribute.

link

: String

[+]

If you need your marker to link to other pages, when clicked, define the link here. The link can open in same window, new window, pop-up, frames, throw events etc. Please see Drill Down Maps section for more information on link format.

scale

: Number

[+]

If you’re using the same shape (shapeId) to represent multiple markers on the map, you can have them differ in size using this attribute. This attributes set the scaling of a particular marker. Valid values are floating numbers between 0 and 5.

Range: 0-5
radius

: number

[+]

In case of arc, circle or polygon, this attribute lets you set the radius of the same. The value of the radius attribute in <shape> element overrides the value of this attribute.

Range: In pixels
}

<markers> ... <application> ... <apply> element

The <apply> element is shows individual markers using the following attributes.

chart
: {
id

: Alphanumeric

[+]

ID that matches the marker application to its definition. If you specify an ID which has not been defined previously, you’ll see an error in the debug window.

shapeId

: String

[+]

Using this attribute, you can set the shape that this marker will assume on the map. FusionMaps XT offers 4 default shapes - circle, arc, triangle or diamond. You can also define your custom shapes and then refer to those.

label

: String

[+]

You can over-ride the labels for each marker during its application. This label will over-ride the label specified during definition.

labelPos

: String

[+]

Like label, you can also over-ride the label position for each marker during its application.

Range: LEFT, RIGHT, CENTER, TOP, BOTTOM
toolText

: String

[+]

If you need to provide custom tool text for a marker, you can do so using this attribute.

link

: String

[+]

If you need your marker to link to other pages, when clicked, define the link here. The link can open in same window, new window, pop-up, frames, throw events etc. Please see “Drill Down Maps” section for more information on link format.

scale

: Number

[+]

If you’re using the same shape (shapeId) to represent multiple markers on the map, you can have them differ in size using this attribute. This attributes set the scaling of a particular marker. Valid values are floating numbers between 0 and 5.

Range: 0-5
}

<markers> ...<shapes>...<shape> element

The <shape> element is used to declare custom shapes. It can have a lot of attributes as explained below.

chart
: {
id

: Alphanumeric

[+]

Each shape needs to be given a unique Id. During application, you’ll directly refer to the ID of each shape to plot it on the map.

type

: String

[+]

type specifies what kind of shape the marker will draw as. Valid values are circle, arc, polygon or image. So, if you want to create a pentagon, select polygon for this attribute and then later set sides to 5.

Range: CIRCLE, ARC, POLYGON, IMAGE
url

: String

[+]

If you’re using an image marker shape, you necessarily need to specify it’s URL. FusionMaps XT can load GIF, JPEG and PNG files from the same sub-domain only (owing to cross browser security restrictions).

Range: URL
sides

: Number

[+]

If you’ve opted to plot a polygon shaped marker, you can specify the number of sides the polygon will have, using this attribute. Valid values are 3-20.

Range: 3-20
alpha

: Number

[+]

This attribute lets you configure the alpha of the entire marker.

Range: 0-100
labelPadding

: Number

[+]

This attribute lets you set the distance (in pixels) between your marker shape and the marker label.

Range: In Pixels
fillColor

: Color

[+]

Using this attribute, you can specify the fill color for the marker shape (hex code without #). If you specify a comma separated list of hex codes (without #), FusionMaps XT will use those colors to form a gradient.

Range: In Pixels
fillAlpha

: Number

[+]

Used to specify the fill alpha. In case of gradients, you’ll need to specify a comma separated list of alpha.

Range: 0-100
fillRatio

: Number

[+]

If you’re using gradient fills for the marker, this attribute lets you set the ratio (on a scale of 0-100) for the gradient component colors.

Range: 0-100
fillAngle

: Number

[+]

If you’re using gradient fills for the marker, this attribute lets you set the angle for the gradient.

Range: 0-360
fillPattern

: String

[+]

If you’re using gradient fills for the marker, this attribute lets you set the pattern for gradient - valid values are linear or radial.

Range: LINEAR, RADIAL
showBorder

: Boolean

[+]

Whether to show border for the marker shape?

Range: 0/1
borderColor

: Color

[+]

Border color for the marker shape.

Range: Hex Code
borderThickness

: Number

[+]

Border thickness for the marker shape.

Range: In Pixels
borderAlpha

: Number

[+]

Border alpha for the marker shape.

Range: 0-100
radius

: Number

[+]

In case of arc, circle or polygon, this attribute lets you set the radius of the same.

Range: In Pixels
innerRadius

: Number

[+]

In case of arc, this attribute lets you set the inner radius of the same.

Range: In Pixels
startAngle

: Number

[+]

In case of arc or polygon, this attribute lets you set the starting draw angle.

Range: 0-360
endAngle

: Number

[+]

In case of arc, this attribute lets you set the ending draw angle.

Range: 0-360
xScale

: Number

[+]

This attribute lets you dynamically re-scale the x-scale of your images after they’ve been loaded. Valid range is 0-1000.

Range: 0-1000
yScale

: Number

[+]

This attribute lets you dynamically re-scale the y-scale of your images after they’ve been loaded. Valid range is 0-1000.

Range: 0-1000
vAlign

: String

[+]

When using an image marker, you can specify how the image will vertically align with respect to the marker’s y position using this attribute. Valid values are top, middle and bottom. For markers which are simple icons, you can use the middle vertical align. In that case, the image will vertically be at the center position of the marker. However, if you’ve an image icon like a pin-point or a needle with its pointer faced downwards, you’ll need to set the vertical alignment position to top, so that the pointer exactly points to the given marker location. Horizontally, the images are always aligned centrally.

Range: TOP, MIDDLE, BOTTOM
}

<markers> ... <connectors> ... <connector> element

chart
: {
from

: String

[+]

Id of the marker from where the connector will start.

to

: String

[+]

Id of the marker where the connector will end.

link

: String

[+]

Each connector can also link to an external URL. For this attribute, you can specify the link for the connector in FusionCharts Link format.

label

: String

[+]

Each connector can have a visible text label. This attribute lets you set the text.

toolText

: String

[+]

If you want to set a custom tool text for the connectors, this attribute lets you do so.

thickness

: Number

[+]

Thickness of the connector line.

Range: 0-10
color

: Color

[+]

Color of the connector line.

Range: Hex Code
alpha

: Number

[+]

Alpha (transparency) of the connector line.

Range: 0-100
dashed

: Boolean

[+]

Whether the connector line should appear as dashed?

Range: 0/1
dashLen

: Number

[+]

If the connector line is to appear as dashed, this attribute defines the length of each dashed line.

Range: 0-10
dashGap

: Number

[+]

If the connector line is to appear as dashed, this attribute defines the gap between each dashed line.

Range: 0-10
showHoverEffect

: Boolean

[+]

Lets you enable hover effect for this specific connector

Range: 0 / 1
hoverColor

: Color

[+]

Color for this specific connector on hover

hoverAlpha

: Number

[+]

Alpha for this specific connector on hover

Range: 0 - 100
hoverThickness

: Number

[+]

Border thickness for this specific connector on hover

Range: In Pixels
showToolTip

: Boolean

[+]

Whether to show tooltip for the connector. Default value is 1.

Range: 0/1
}

<entityDef> element

FusionMaps XT allows you to re-define the IDs of all the entities of the map. Apart from re-defining identities, it can also re-define the short name and long name of each identity. These re-definitions are contained within the <entityDef> element.

<entityDef> ... <entity> element

To re-define the marker, you need to create <entity> element under <entityDef> element. Each <entity> element under <entityDef> element can have the following attributes:

chart
: {
internalId

: String

[+]

The internal and default ID of any entity of the map.

newId

: String

[+]

The new ID of any entity of the map which overrides the internal ID.

sName

: String

[+]

The short descriptive name of an entity.

lName

: String

[+]

The long descriptive name of an entity.

showHoverEffect

: Boolean

[+]

Lets you enable hover effect for this specific entity

Range: 0 / 1
borderHoverThickness

: Number

[+]

Border thickness for the specific entity on hover

Range: In Pixels
fillHoverColor

: Color

[+]

Fill color for the specific entity on hover

fillHoverAlpha

: Number

[+]

Alpha for the specific entity on hover

Range: 0 - 100
fillHoverRatio

: Comma separated Numbers

[+]

If hover color is defined as a gradient using, this attribute lets you specify the distribution of those colors in a ratio that should sum to 100

Range: Sums up to 100
fillHoverAngle

: Number

[+]

Fill angle for the specific entity on hover

Range: 0 - 360
}

<colorRange> element

The <colorRange> element within the <map> element helps to distinguish various entities based on their data. Essentially, the <colorRange> element is used to contain the various range definitions.

chart
: {
gradient

: Boolean

[+]

Whether to show Gradient Legend. Default value is 0.

Range: 0/1
minValue

: Number

[+]

Sets the minimum value or the lower limit of the numeric range and Gradient Legend.

code

: Color

[+]

Specifies the starting color of the lower limit of Gradient Legend.

Range: Hex Code
alpha

: Number

[+]

Starting opacity of Gradient Legend. Default value is 100.

Range: 0-100
startLabel

: String

[+]

Specifies the label for the lower limit of Gradient Legend.

endLabel

: String

[+]

Specifies the label for the upper limit of Gradient Legend.

}

<colorRange> ... <color> element

The <color> element under <colorRange> element is used to define a single range. Each <color> element under the <colorRange> element can have the following attributes:

chart
: {
minValue

: Number

[+]

Lower limit of range.

maxValue

: Number

[+]

Upper limit of range.

displayValue

: String

[+]

Text representation of range (to be shown in legend).

code

: Color

[+]

Hex color code (without #) for the range.

Range: Hex Code
alpha

: Number

[+]

Transparency (0-100) for the entities belonging to that range.

Range: 0-100
}

Hover effects

If you wish to show an effect on entities, markers and connectors in the map, when the user hovers his mouse over them, these attributes let you configure the cosmetics of the hover effect.

chart
: {
showHoverEffect

: Boolean

[+]

Lets you enable hover effect for entities and markers in the map

Range: 0 / 1
showEntityHoverEffect

: Boolean

[+]

Lets you enable hover effect just for entities on the map

Range: 0 / 1
showMarkerHoverEffect

: Boolean

[+]

Lets you enable hover effect just for makers on the map, if defined

Range: 0 / 1
showConnectorHoverEffect

: Boolean

[+]

Lets you enable hover effect just for connectors on the map, if defined

Range: 0 / 1
entityFillHoverColor

: Color

[+]

Specifies the fill color for a map entity on hover

entityFillHoverAlpha

: Number

[+]

Specifies the alpha for a map entity on hover

Range: 0 - 100
entityFillHoverRatio

: Comma separated Numbers

[+]

Specifies the fill ratio for an map entity on hover

Range: Sums up to 100
entityFillHoverAngle

: Number

[+]

Specifies the fill angle for a map entity on hover

Range: 0 - 360
entityBorderHoverThickness

: Number

[+]

Specifies the border thickness for a map entity on hover

Range: In Pixels
markerFillHoverColor

: Color

[+]

Specifies the fill color for a map marker on hover

Range: N/A
markerFillHoverAlpha

: Number

[+]

Specifies the fill alpha for a map marker on hover

Range: 0 - 100
markerFillHoverAngle

: Number

[+]

Specifies the fill angle for a map marker on hover

Range: 0 - 360
markerFillHoverRatio

: Comma separated Numbers

[+]

Specifies the fill ratio for a map marker on hover

Range: Sums up to 100
markerBorderHoverThickness

: Number

[+]

Specifies the border thickness for a map marker on hover

Range: In Pixels
markerBorderHoverColor

: Color

[+]

Specifies the border color for a map marker on hover

markerBorderHoverAlpha

: Number (1-100)

[+]

Specifies the border alpha for a map marker on hover

Range: In Pixels
connectorHoverColor

: Color

[+]

Specifies the fill color for a map connector on hover

connectorHoverThickness

: Number

[+]

Specifies the border thickness for a map connector on hover

Range: In Pixels
connectorHoverAlpha

: Number

[+]

Specifies the border alpha for a map connector on hover

Range: 0 -100
}
Top