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 entity labels, display them above/below the markers, and so on.

chart
: {
showLabels

: Boolean

[+]

Sets whether entity labels will be shown or hidden

Default value: 0 (hidden)

Range: 0/1
includeNameInLabels

: Boolean

[+]

Sets whether entity names will be shown as a part of map labels

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1
includeValueInLabels

: Boolean

[+]

Sets whether entity values will be shown as a part of map labels

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1
useSNameInLabels

: Boolean

[+]

Sets whether an entity’s short name or long name will be a part of the map label

Default value: 1 (the short name is used in the label)

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1
useSNameInToolTip

: Boolean

[+]

Sets whether an entity’s short name or long name will be a part of the tooltip for an entity

Default value: 1 (the long name is used in the tooltip)

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1
showShadow

: Boolean

[+]

Sets whether a shadow effect will be applied to the map

Default value: 0 (the effect is not applied)

Range: 0/1
caption

: String

[+]

Sets the map caption

subCaption

: String

[+]

Sets the map sub-caption

captionPosition

: String

[+]

Sets the caption and sub-caption position

Default value: top-center

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

: String

[+]

The entire map can act as a hotspot. This attribute is used to specify the URL to define the hotspot link for the map. The link can be specified in FusionCharts Link Format.

hoverOnEmpty

: Boolean

[+]

Sets whether the tooltip will shown for entities that don’t have a value assigned in the JSON data

Range: 0/1
aboutMenuItemLabel

: String

[+]

Sets the menu item label for the custom context menu item

entityLabelsOnTop

: Boolean

[+]

Sets whether entity labels will be shown above or below the markers on a map

Default value: 1 (the 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

[+]

Sets whether a border will be shown around the canvas

Default value: 0 (the canvas border is hidden)

Range: 0/1
canvasBorderColor

: Color

[+]

Sets the color for the canvas border, if the border is shown

Range: Hex Color Code
canvasBorderThickness

: Number

[+]

Sets the thickness for the canvas border, if the border is shown

Range: In Pixels
canvasBorderAlpha

: Number

[+]

Sets the transparency for the canvas border, if the border is shown

Range: 0-100
bgColor

: Color

[+]

Sets the background color for the map

To apply a gradient color background, specify a comma-separated list of the hex color codes to be used

bgAlpha

: Number

[+]

Sets the background transparency

To set the transparency for a gradient background, specify a comma-separated list of the transparency value for each color.

Range: 0-100
bgRatio

: Number

[+]

For a gradient backgrouns, sets the ratio of each color constituent.

Range: 0-100
bgAngle

: Number

[+]

For a gradient backgrouns, sets the angle of each color constituent.

Range: 0-360
bgImage

: String

[+]

Sets an image as the map background by taking the path and name of the image as the value

bgImageAlpha

: Number

[+]

Sets the transparency of the background image

Range: 0-100
bgImageDisplayMode

: String

[+]

Sets the display mode for the background image

Acceptable values include:

stretch: Image is expanded to fit the entire map area, without maintaining original constraints

tile: Image is repeated as a pattern on the entire map area

fit: Image is made to fit proportionately on the map area

fill: Image is made to proportionately fill the entire map area

center: Image is positioned at the center of the map area

none: None of the above modes are applied

Default value: none

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

: String

[+]

Sets the vertical alignment of the background image

Range: top, middle, bottom
bgImageHAlign

: String

[+]

Sets the horizontal alignment of the background image

Range: left, middle, right
bgImageScale

: Number

[+]

Sets the magnifying scale for the background image

This attribute will only work when bgImageDisplayMode is set to none, center, or tile.

Range: 0-300
logoURL

: String

[+]

Sets the path to load external logo (image file) on the map

Range: URL
logoPosition

: String

[+]

Sets the logo position

Acceptable values include: TL (top-left), TR (top-right), BL (bottom-left), BR (bottom-right), CC (center of the screen)

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

: Number

[+]

Sets the logo transparency

Range: 0-100
logoScale

: Number

[+]

Sets the magnifying scale for the logo

Range: 0-300
logoLink

: String

[+]

Links 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
: {
showBorder

: Boolean

[+]

Sets whether the entity borders will be shown or hidden

Default value: 1 (the borders are shown)

Range: 0/1
borderColor

: Color

[+]

Sets the border color for map entities

Range: Hex Color Code
borderAlpha

: Number

[+]

Sets the border transparency for map entities

Range: 0-100
fillColor

: Color

[+]

Sets the default fill color for the entities, if no color range has been specified

Range: Hex Color Code
fillAlpha

: Alpha

[+]

Sets the transparency for the fill color of the entities

Range: 0-100
useHoverColor

: Boolean

[+]

Sets whether the entities will be rendered in a different color—specified using the hoverColor attribute—when the mouse pointer is hovered over them

Range: 0/1
hoverColor

: Color

[+]

Sets the color that will be applied to an entity when the mouse pointer is hovered over it

Range: Hex Color Code
nullEntityColor

: Color

[+]

Sets a default color for enities that are not assigned any value in the map data

Range: Hex Color Code
nullEntityAlpha

: Number

[+]

Sets a default transparency for enities that are not assigned any value in the map data

Range: 0-100
showEntityToolTip

: Boolean

[+]

Sets whether the tooltip for the entities will be shown or hidden

Default value: 1 (the tooltip is shown)

Range: 0/1
labelConnectorColor

: Hex Color 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

[+]

Sets whether the numbers displayed on the map will be formatted using commas

For example, when formatNumber is set to 1, the number will be rendered as 40,000; when formatNumber is set to 0, it will be rendered as 40000.

Range: 0/1
decimals

: Number

[+]

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

Range: 0-10
forceDecimals

: Boolean

[+]

Sets whether zero padding will be forced for decimal numbers

For example, if you limit the maximum number of digits after the decimal point to 2, a number like 55.344 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. To have fixed number of decimal places attached to all the numbers, set this attribute to 1.

Range: 0/1
numberPrefix

: String

[+]

Sets a prefix for the numbers on the map

For example, to represent all dollars figure on the map, set this attribute to $. The numbers will then be rendered as $40000, $50000.

Click here for more information.

Range: Character
numberSuffix

: String

[+]

Sets a suffix for the numbers on the map

For example, to represent all numbers quantified as per annum, set this attribute to ‘ /a’. The numbers will then be rendered as 40000/a, 50000/a and so on.

Click here for more information.

Range: Character
decimalSeparator

: String

[+]

Sets the character to be used as the decimal separator for the numbers on the map

Click here for more information.

Range: Character
thousandSeparator

: String

[+]

Sets the character to be used as the thousand separator for the numbers on the map

Click here for more information.

Range: Character
thousandSeparatorPosition

: List of comma separated Numbers

[+]

Sets the number of digits after which the thousand separator should be positioned

Click here for more information.

inDecimalSeparator

: String

[+]

In some countries, commas are used as decimal separators and dots as thousand separators. If your chart data is in XML andyou specify such values, it returns an 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.

Click here for more information.

Range: Character
inThousandSeparator

: String

[+]

In some countries, commas are used as decimal separators and dots as thousand separators. If your chart data is in XML andyou specify such values, it returns an 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.

Click here for more information.

Range: Character
formatNumberScale

: Boolean

[+]

Sets whether the suffix K (for thousands) and M (for millions) will be added to a number after it is truncated and rounded off.

For example, when formatNumberScale is set to 1, the number 1043 will be rendered as 1.04K (assuming decimals is set to 2).

Click here for more information.

Range: 0/1
defaultNumberScale

: String

[+]

Sets the default unit of the numbers on the map

Click here for more information.

numberScaleUnit

: String

[+]

Sets the unit for each block of the number scale

Click here for more information.

numberScaleValue

: String

[+]

Sets the range for each block on the number scale

Click here for more information.

scaleRecursively

: Boolean

[+]

Sets whether recursive scaling will be enabled for the numbers on the map

Click here for more information.

Range: 0/1
maxScaleRecursion

: Number

[+]

Sets the number of recursions to complete during recusrive scaling

Setting this attribute to 1 completes the entire set of recursion

Click here for more information.

scaleSeparator

: String

[+]

Sets the separator character for the scales generated after recursion

Click here for more information.

}

Legend Properties

If you’ve defined color ranges, the color range names appear in a legend. The following attributes let you customize the functional and cosmetic properties for the legend such as the legend position, legend border color, and so on.

chart
: {
showLegend

: Boolean

[+]

Sets whether the legend will be shown or hidden

Range: 0/1
interactiveLegend

: Boolean

[+]

Sets whether legend interaction will be enabled or disbaled

Entities can be shown or hidden from the map by clicking the associated legend item.

Range: 0/1
legendAllowDrag

: Boolean

[+]

Sets whether the legend can be made dragable

Setting this attribute to 1 enables dragging the legend anywhere around the chart.

Default value: 0

Note: This attribute does not refer to the dragable sliders on a gradient legend, but to the complete legend.

Range: 0/1
legendCaption

: String

[+]

Sets the legend caption

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

[+]

Positions the legend to render below the map or to the right of the map

Default value: BOTTOM

Range: BOTTOM or RIGHT
legendIconScale

: Number

[+]

Sets the magnifying scale for the legend icons

Default value: 1

Range: 0-5
legendShadow

: Boolean

[+]

Sets whether the shadow effect will be applied to the legend

Range: 0/1
legendBgColor

: Color

[+]

Sets the legend background color

Range: Hex Color Code
legendBgAlpha

: Number

[+]

Sets the legend background transparency

Range: 0-100
legendBorderColor

: Color

[+]

Sets the legend border color

Range: Hex Color Code
legendBorderThickness

: Number

[+]

Sets the legend border thickness

Range: In Pixels
legendBorderAlpha

: Number

[+]

Sets the legend border transparency

Range: 0-100
legendScrollBgColor

: Color

[+]

Sets the legend scroll bar background color

A scroll bar is rendered in the legend if there are too many legend items.

Range: Hex Color Code
legendScrollBarColor

: Color

[+]

Sets the legend scroll bar color

A scroll bar is rendered in the legend if there are too many legend items.

Range: Hex Color Code
legendScrollBtnColor

: Color

[+]

Sets the color for the legend scroll bar buttons

A scroll bar is rendered in the legend if there are too many legend items.

Range: Hex Color Code
legendPointerColor

: Color

[+]

Sets the gradient legend pointer color

Range: Hex Color Code
legendPointerAlpha

: Number

[+]

Sets the gradient legend pointer transparency

Range: 0-100
legendPointerBorderThickness

: Number

[+]

Sets the gradient legend pointer border thickness

legendPointerBorderAlpha

: Number

[+]

Sets the gradient legend pointer border transparency

Range: 0-100
legendPointerBorderColor

: Color

[+]

Sets the gradient legend pointer border color

Range: Hex color code
legendScaleLineColor

: Color

[+]

Sets the color of the line showing the gradient legend numeric scale

Range: Hex Color Code
legendScaleLineAlpha

: Number

[+]

Sets the opacity of the line showing the gradient legend numeric scale

Range: 0-100
legendScaleLineThickness

: Number

[+]

Sets the thickness of the line showing the gradient legend numeric scale

}

The data Object

The data object is used to create entities for the map.

data
: {
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 color code here.

Range: Hex Color 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

: Color

[+]

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.

Range: Hex Color Code
toolTipBorderColor

: Color

[+]

Border Color for tool tip.

Range: Hex Color Code
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
}

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.

Range: Hex Color Code
}

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, SVG or XLS

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

chart
: {
exportEnabled

: Boolean

[+]

Whether the map will allow exporting to images, PDFs, SVG or XLS.

Default value: 0

Range: 0/1
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.

Default value: download

Range: 'save' or 'download'
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).

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: exportFormats: PNG=Export as High Quality Image&#124;JPG&#124;PDF=Export as PDF File

exportAtClientSide

: Boolean

[+]

This attribute when set to 1, enables the client-side export feature.

Default value: 0

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
exportTargetWindow

: String

[+]

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

Default value: _self

Range: '_self' or '_blank'
exportFileName

: String

[+]

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

}

Marker Properties

FusionMaps XT allows user-defined markers on the map. 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.

Range: Hex Color Code
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 Color 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 Color 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 color code without #). If you specify a comma separated list of hex color 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
}

The markers object

All data pertinent to markers (applicable marker shapes, definitions for zones in which markers will be applied) is defined within the markers object and its child objects.

The definition object (child of the markers object)

The markers object is used to define and apply markers to a map. The definition object is used to define the zones on the map within which the markers will be placed.

definition
: {
id

: Alphanumeric

[+]

Unique ID for the zone

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
}

The application object (child of the markers object)

The markers object is used to define and apply markers to a map. The application object is used to map markers shapes to zones on the map.

application
: {
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
}

The shapes object (child of the markers object)

The markers object is used to define and apply markers to a map. The shapes object is used to define the shapes that will be applied as markers.

shapes
: {
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 color code without #). If you specify a comma separated list of hex color 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 Color 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
}

The connectors object (child of the markers object)

The markers object is used to define and apply markers to a map. The connectors object is used to draw connectors to connect markers to other markers or marker labels.

connectors
: {
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 Color 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
}

The entityDef object

FusionMaps XT allows you to redefine the ID, short name, and long name of an entity, using the entityDef object. This object contains the following attributes:

entityDef
: {
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
}

The colorRange object

The colorRange object is used to define ranges for categorizing entities on a map based on their data values. This object contains the attributes to define the range scale. Note: The colorRange object is not used to collectively configure all ranges; the color object (child of the colorRange object) is used to do that.

colorRange
: {
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 Color 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.

}

The color object (child of the `colorRange` object)

The color object is used to define individual ranges using the following attributes:

color
: {
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 Color Code
alpha

: Number

[+]

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

Range: 0-100
}

Hover effects

The hover effect attributes let you customize the resultant effect on the entities when the mouse pointer is hovered over them.

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
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
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