FusionCharts - Data Enabled Markers with connectors

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ritesh Pandey

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/maps/fusioncharts.usa.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Using Data Enabled Markers with connectors in Map showing National  warehouses in California, Texas and North Carolina with their strengths and their connected States -->

<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var shippingGeoChart = new FusionCharts({
        "type": "usa",
        "renderAt": "chart-container",
        "width": "600",
        "height": "400",
        "dataFormat": "json",
        
        "dataSource": {
            "map": {
                "theme": "fint",
                "useHoverColor": "0",
                "caption": "Warehouses and their covering States",
                "subcaption": "Harry's Supermart",
                "fillColor": "#008ee4",
                "showCanvasBorder": "0",
                "useValuesForMarkers": "1",
                "showMarkerLabels": "0",
                "numberSuffix": "%",
                "connectorColor": "#90e501",
                "connectorDashed": "1",
                "connectorThickness": "2",
                "borderColor": "#ffffff",
                "showShadow": "0"
            },
            "markers": {
                "shapes": [
                    {
                        "id": "myCustomShape",
                        "type": "circle",
                        "fillcolor": "#f8bd19",
                        "showborder": "0"
                    }
                ],
                "items": [
                    {
                        "shapeid": "myCustomShape",
                        "id": "WA",
                        "x": "54.5",
                        "y": "44.8",
                        "label": "Washington",
                        "radius": "1"
                    },
                    {
                        "shapeid": "myCustomShape",
                        "id": "OR",
                        "x": "58.3",
                        "y": "101.7",
                        "radius": "1"
                    },
                    {
                        "shapeid": "myCustomShape",
                        "id": "ID",
                        "x": "132.8",
                        "y": "110.7",
                        "radius": "1"
                    },
     ...