FusionCharts - Data-driven US Map showing sales by states, in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.maps.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Data-driven US Map, showing sales by state. Interactive legend slider allows change of value range. -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var populationMap = new FusionCharts({
        type: 'world',
        renderAt: 'chart-container',
        width: '700',
        height: '500',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Test World Map",
                    "subcaption": "Number of people per Square Mile",
                    "formatNumberScale": "0",
                    "showLabels": "1",
                    "nullEntityColor": "#C2C2D6",
                    "nullEntityAlpha": "50",
                    "hoverOnNull": "0",
                    "useSNameInLabels": "0",
                    "entityFillColor": "#A8A8A8",
                    "entityFillHoverColor": "#E5E5E9"
            },
                "colorrange": {
                "color": [{
                    "minvalue": "0",
                        "maxvalue": "100",
                        "code": "#D0DFA3",
                        "displayValue": "< 100M"
                }, {
                    "minvalue": "100",
                        "maxvalue": "200",
                        "code": "#B0BF92",
                        "displayValue": "100-200M"
                }, {
                    "minvalue": "200",
                        "maxvalue": "300",
                        "code": "#91AF64",
                        "displayValue": "200M-300"
                }, {
                    "minvalue": "300",
                        "maxvalue": "5000",
                        "code": "#A9FF8D",
                        "displayValue": "> 300"
                }]
            },

                "data": [{
                "id": "NA",
                    "displayValue": "North America",
                    "value": "57.2",
                    "link": "newchart:usa-json-NA"
            }, {
                "id": "SA",
                    "value": "57.1",
                    "showLabel": "1"
            }, {
                "id": "AS",
                    "value":...