Loading
Adding Markers
You can add custom defined markers on any map within FusionCharts Suite XT. Markers can be used to represent locations like cities, junctions, houses, office locations, malls or any other entity which has a geographic location attached to it.
Using simple shapes as markers
Shown below is a map specifying the world’s 5 busiest airports with a triangle denoting the location of each airport.
Each of these airports has been represented as markers in the world map. This data when converted to FusionCharts Suite XT data format looks like this
{
"chart": {
"caption": "Top 5 Busiest Airports in the World",
"subcaption": "Based on Passenger Traffic",
"theme": "fint",
"markerBgColor": "#FF0000",
"markerRadius": "10",
"showMarkerLabels": "1",
"entityFillColor": "#A8A8A8",
"entityFillHoverColor": "#E5E5E9"
},
"markers": {
"items": [
{
"id": "lon",
"shapeid": "triangle",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
},
{
"id": "alt",
"shapeid": "triangle",
"x": "160.14",
"y": "164.9",
"label": "ATL",
"tooltext": "Hartsfield Jackson Atlanta International Airport {br}IACL Code : KATL",
"labelpos": "bottom"
},
{
"id": "dub",
"shapeid": "triangle",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
},
{
"id": "tok",
"shapeid": "triangle",
"x": "628.14",
"y": "165.9",
"label": "HND",
"tooltext": "Tokyo Haneda Airport{br} IACL Code : RJTT",
"labelpos": "bottom"
},
{
"id": "beij",
"shapeid": "triangle",
"x": "573.14",
"y": "161.9",
"label": "PEK",
"tooltext": "Beijing Capital International Airport {br} IACL Code : ZBAA",
"labelpos": "bottom"
}
]
}
}This is what we did in the above data structure
-
Set the
captionof the map and applied thefint(FusionCharts Internal) theme to control the cosmetic properties of the map. ThemarkerBgColorcolor attribute is set to red and themarkerRadiusis set to10these properties when declared at a chart level apply to all markers used on the map. You can override them for specific markers by defining values inside themarkerobject -
Set the
showMarkerLabelsto1. This tells the map to display the labels for each marker. TheentityFillColorandentityFillHoverColorare set to specify the colors of the entities. -
The
markersobject contains an array ofitems. Each item corresponds to a specific marker on the map. -
Individual markers have a unique
idwhich you can use to reference the marker later. They have ashapeIdwhich specifies the shape of the marker. We have set it totrianglein the above example. Possible values arearc,circlepolygonandimage. For a list of all possible attributes you can use for themarkersobject click here. -
Each marker element also has a
xandyco-ordinate and label text stored withlabelas key. -
The
tooltextattribute is used to specify the text that displays inside the tooltip. Finally thelabelposattribute specifies the display location of the marker.
The full HTML code for the example is shown here
<html>
<head>
<title>A Data Driven Map showing Markers</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function() {
var airportsMap = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top 5 Busiest Airports in the World",
"subcaption": "Based on Passenger Traffic",
"theme": "fint",
"markerBgColor": "#FF0000",
"markerRadius": "10",
"showMarkerLabels": "1",
"entityFillColor": "#A8A8A8",
"entityFillHoverColor": "#E5E5E9"
},
"markers": {
"items": [
{
"id": "lon",
"shapeid": "triangle",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
},
{
"id": "alt",
"shapeid": "triangle",
"x": "160.14",
"y": "164.9",
"label": "ATL",
"tooltext": "Hartsfield Jackson Atlanta International Airport {br}IACL Code : KATL",
"labelpos": "bottom"
},
{
"id": "dub",
"shapeid": "triangle",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
},
{
"id": "tok",
"shapeid": "triangle",
"x": "628.14",
"y": "165.9",
"label": "HND",
"tooltext": "Tokyo Haneda Airport{br} IACL Code : RJTT",
"labelpos": "bottom"
},
{
"id": "beij",
"shapeid": "triangle",
"x": "573.14",
"y": "161.9",
"label": "PEK",
"tooltext": "Beijing Capital International Airport {br} IACL Code : ZBAA",
"labelpos": "bottom"
}
]
}
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">A world map will load here!</div>
</body>
</html>Using Images or Icons as Markers
In the previous example we saw how we can use predefined shapes to build markers. FusionCharts Suite XT allows you to use external images or icons as markers. You need to customize the shapes object to do this.
Shown here is the same map as before but using an airplane icon for the marker.
The data structure of this is shown below
{
"chart": {
"caption": "Top 5 Airports in the World",
"subcaption": "Based on Passenger Traffic",
"theme": "fint",
"showMarkerLabels": "1",
"entityFillColor": "#A8A8A8",
"entityFillHoverColor": "#E5E5E9"
},
"markers": {
"shapes": [
{
"id": "myCustomShape",
"type": "image",
"url": "http://static.fusioncharts.com/docs/assets/airplane-99047_150.png",
"xscale": "15",
"yscale": "15",
"labelPadding": "15"
}
],
"items": [
{
"id": "lon",
"shapeid": "myCustomShape",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
},
{
"id": "was",
"shapeid": "myCustomShape",
"x": "160.14",
"y": "164.9",
"label": "ATL",
"tooltext": "Hartsfield Jackson Atlanta International Airport {br}IACL Code : KATL",
"labelpos": "bottom"
},
{
"id": "dub",
"shapeid": "myCustomShape",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
},
{
"id": "tok",
"shapeid": "myCustomShape",
"x": "628.14",
"y": "165.9",
"label": "HND",
"tooltext": "Tokyo Haneda Airport{br} IACL Code : RJTT",
"labelpos": "bottom"
},
{
"id": "beij",
"shapeid": "myCustomShape",
"x": "573.14",
"y": "161.9",
"tooltext": "Beijing Capital International Airport {br} IACL Code : ZBAA",
"labelpos": "bottom"
}
]
}
}This is what we did in the above data structure
-
Created a map as shown earlier and set its theme to
fint, Then we specified marker related attributes. -
We created a
shapesobject within themarkersobject and specified a uniqueidfor this shape asmyCustomShape. -
Then we set the
urlto point to the location of the image and thexscaleandyscaleattributes to control the scale factor of the image on the map. Here we set it to15, smaller values indicate smaller sizes of the marker. -
Finally we create the
itemsarray exactly as explained in the previous section except that we set theshapeIdattribute of the marker tomyCustomShape, this tells the map that when displaying the marker use theshapethat is defined as part of the shape definition ofmyCustomShape.
The full HTML code to build this sample is given below:
<html>
<head>
<title>A Data Driven Map</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
var airportsMap = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption" : "Top 5 Airports in the World",
"subcaption" : "Based on Passenger Traffic",
"theme": "fint",
"showMarkerLabels" : "1",
"entityFillColor" : "#A8A8A8",
"entityFillHoverColor" : "#E5E5E9"
},
"markers": {
"shapes": [
{
"id": "myCustomShape",
"type": "image",
"url": "http://static.fusioncharts.com/docs/assets/airplane-99047_150.png",
"xscale": "15",
"yscale": "15",
"labelPadding": "15"
}
],
"items" : [
{
"id":"lon",
"shapeid": "myCustomShape",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
},
{
"id": "was",
"shapeid": "myCustomShape",
"x": "160.14",
"y": "164.9",
"label": "ATL",
"tooltext": "Hartsfield Jackson Atlanta International Airport {br}IACL Code : KATL",
"labelpos": "bottom"
},
{
"id": "dub",
"shapeid": "myCustomShape",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
},
{
"id": "tok",
"shapeid": "myCustomShape",
"x": "628.14",
"y": "165.9",
"label": "HND",
"tooltext": "Tokyo Haneda Airport{br} IACL Code : RJTT",
"labelpos": "bottom"
},
{
"id": "beij",
"shapeid": "myCustomShape",
"x": "573.14",
"y": "161.9",
"tooltext": "Beijing Capital International Airport {br} IACL Code : ZBAA",
"labelpos": "bottom"
}]
}
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">A world map will load here!</div>
</body>
</html>Connecting Markers
FusionCharts Suite XT allows you to connect any two defined markers on the map using Marker Connectors. You can show custom labels for the connectors, link it to external URLs, show tooltips for the connector and customize all its cosmetics.
Shown below is a map showing the busiest air routes from the Heathrow airport in London. The respective airports are connected using connectors
Marker Connectors as part of FusionCharts Suite XT require a unique ID to be specified as part of the marker definition.
Shown below is the data used to build the map.
{
"chart": {
"caption": "Busiest Routes from Heathrow Airport",
"subcaption": "2014",
"theme": "fint",
"markerBgColor": "#FF0000",
"markerRadius": "10",
"showMarkerLabels": "1",
"connectorColor": "#0CB2B0",
"connectorHoverColor": "#339933",
"entityFillColor": "#CECED2",
"entityFillHoverColor": "#E5E5E9"
},
"markers": {
"items": [
{
"id": "lon",
"shapeid": "triangle",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
},
{
"id": "nyc",
"shapeid": "triangle",
"x": "178.14",
"y": "154.9",
"label": "JFK",
"tooltext": "John F Kennedy Airport {br}IACL Code : KJFK",
"labelpos": "bottom"
},
{
"id": "dub",
"shapeid": "triangle",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
},
{
"id": "sg",
"shapeid": "triangle",
"x": "558.14",
"y": "255.9",
"label": "SIN",
"tooltext": "Singapore International Airport {br} IACL Code : WSSS",
"labelpos": "bottom"
},
{
"id": "hk",
"shapeid": "triangle",
"x": "573.14",
"y": "202.9",
"label": "HKG",
"tooltext": "Hong Kong International Airport {br} IACL Code : VHHH",
"labelpos": "bottom"
}
],
"connectors": [
{
"from": "lon",
"to": "hk",
"tooltext": "<b>London to Hong Kong</b>{br} Total Passengers: 1,801,520"
},
{
"from": "lon",
"to": "sg",
"tooltext": "<b>London to Singapore</b>{br} Total Passengers: 1,507,032"
},
{
"from": "lon",
"to": "nyc",
"tooltext": "<b>London to New York{br} Total Passengers: 2,551,276"
},
{
"from": "lon",
"to": "dub",
"tooltext": "<b>London to Dubai</b>{br} Total Passengers: 1,974,078"
}
]
}
}This is what we did in the above data structure
-
Created the map as shown earlier and set its theme to
fint, Then we specified the marker related attributes just as in the previous section. Here we also define theconnectorColorwhich specifies the color of the connector line and theconnectorHoverColorwhich specifies the color of the connector line on hover. These attributes when declared at a chart level apply to all connectors used on the map. You can override them for specific markers by defining values inside theconnectorobject. -
Create the
markersobject which contains an array ofitems. Each element in this array corresponds to a specific marker on the map. We define each element initemexactly as shown in the previous two examples. -
Then we create a
connectorsobject inside themarkerswhich contains information on the connectors. Each connector has a starting marker withfromas key and a ending marker withtoas key. They must each reference a unique markerid. -
The connector also has a
tooltextattribute which is used to specify the text that displays inside the tooltip. In our example thetooltextis set to display the number of passengers flying on that route.
The HTML code used to build the sample is given below
<html>
<head>
<title>A map showing connectors</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function() {
var routesMap = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Busiest Routes from Heathrow Airport",
"subcaption": "2014",
"theme": "fint",
"markerBgColor": "#FF0000",
"markerRadius": "10",
"showMarkerLabels": "1",
"connectorColor": "#0CB2B0",
"connectorHoverColor": "#339933",
"entityFillColor": "#CECED2",
"entityFillHoverColor": "#E5E5E9"
},
"markers": {
"items": [{
"id": "lon",
"shapeid": "triangle",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
}, {
"id": "nyc",
"shapeid": "triangle",
"x": "178.14",
"y": "154.9",
"label": "JFK",
"tooltext": "John F Kennedy Airport {br}IACL Code : KJFK",
"labelpos": "bottom"
}, {
"id": "dub",
"shapeid": "triangle",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
}, {
"id": "sg",
"shapeid": "triangle",
"x": "558.14",
"y": "255.9",
"label": "SIN",
"tooltext": "Singapore International Airport {br} IACL Code : WSSS",
"labelpos": "bottom"
}, {
"id": "hk",
"shapeid": "triangle",
"x": "573.14",
"y": "202.9",
"label": "HKG",
"tooltext": "Hong Kong International Airport {br} IACL Code : VHHH",
"labelpos": "bottom"
}],
"connectors": [{
"from": "lon",
"to": "hk",
"tooltext": "<b>London to Hong Kong</b>{br} Total Passengers: 1,801,520"
}, {
"from": "lon",
"to": "sg",
"tooltext": "<b>London to Singapore</b>{br} Total Passengers: 1,507,032"
}, {
"from": "lon",
"to": "nyc",
"tooltext": "<b>London to New York{br} Total Passengers: 2,551,276"
}, {
"from": "lon",
"to": "dub",
"tooltext": "<b>London to Dubai</b>{br} Total Passengers: 1,974,078"
}]
}
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">A world map will load here!</div>
</body>
</html>With this you have learnt how to create connectors and customize them to suit your needs. For a detailed list of all the attributes that you can use to customize markers and connectors visit the Attribute Reference page.