FusionCharts - Simple World Map

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ayan Bhadury

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.maps.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.world.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.asia.js?cacheBust=8232"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.europe.js?cacheBust=8232"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.africa.js?cacheBust=8232"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.australia.js?cacheBust=8232"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.northamerica.js?cacheBust=8232"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.southamerica.js?cacheBust=8232"></script>
<body>
<h1>
Hover over Madagascar to see the 
</h1>
  <div id="chart-container">Africa map will load here!</div>
  <textarea id="message" rows="4" cols="54" style='margin-left:10px;text-align:center'>"Total Population 6.3 Billion" </textarea>
</body>

JavaScript

FusionCharts.ready(function() {
  var mydata = {
    "chart": {
      "caption": "Global Population",
      "theme": "fint",
      "formatNumberScale": "0",
      "numberSuffix": "M",
      "showLabels": "1",
      "showToolTip": "0"
    },
    "colorrange": {
      "color": [{
        "minvalue": "0",
        "maxvalue": "100",
        "code": "#D0DFA3",
        "displayValue": "< 100M"
      }, {
        "minvalue": "100",
        "maxvalue": "500",
        "code": "#B0BF92",
        "displayValue": "100-500M"
      }, {
        "minvalue": "500",
        "maxvalue": "1000",
        "code": "#91AF64",
        "displayValue": "500M-1B"
      }, {
        "minvalue": "1000",
        "maxvalue": "5000",
        "code": "#A9FF8D",
        "displayValue": "> 1B"
      }]
    },
    "data": [{
      "id": "001",
      "value": "515",
      "displayvalue": "A"
    }, {
      "id": "002",
      "value": "373",
      "displayvalue": "B"
    }, {
      "id": "003",
      "value": "3875",
      "displayvalue": "c"
    }, {
      "id": "004",
      "value": "727"
    }, {
      "id": "005",
      "value": "885"
    }, {
      "id": "006",
      "value": "32"
    }, {
      "id": "007",
      "value": "55"
    }, {
      "id": "008",
      "value": "33"
    }, {
      "id": "009",
      "value": "3875"
    }, {
      "id": "010",
      "value": "727"
    }, {
      "id": "011",
      "value": "885"
    }, {
      "id": "012",
      "value": "362"
    }, {
      "id": "013",
      "value": "515"
    }, {
      "id": "014",
      "value": "373"
    }, {
      "id": "015",
      "value": "3875"
    }, {
      "id": "016",
      "value": "727"
    }, {
      "id": "017",
      "value": "885"
    }, {
      "id": "018",
      "value": "32"
    }, {
      "id": "019",
      "value": "515"
    }, {
      "id": "020",
      "value": "33"
    }, {
      "id": "021",
      "value": "3875"
    }, {
      "id": "022",
      "value": "7"
    }, {
      "id": "023",
      "value": "85"
 ...