FusionCharts - Custom Markers using shapes and images in maps

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

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>
<!-- This example extends the basic markers samples to use other possible shapes for markers - Triangle, Arc and Images. # shapeId - set to arc or triangle as per need # url - set to "http://static.fusioncharts.com/sampledata/images/building.png" for custom image as marker -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var topStates = new FusionCharts({
        "type": "usa",
        "renderAt": "chart-container",
        "width": "600",
        "height": "400",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "theme": "fint",
                "useHoverColor": "0",
                "useValuesForMarkers": "1",
                "showMarkerLabels": "1",
                "showLabels":"0"
                
            },
            "markers": {
                "items": [
                    {
                        "shapeid": "circle",
                        "id": "TX",
                        "x": "333",
                        "y": "304",
                        "label": "Texas",
                        "alpha":"40",
                        //Values of marker that make it data enabled
                        "value": "97344000",
                        "radius": "25",
                        "labelPos" : "CENTER",
                        "tooltext": "Rank #1, $label, Revenue : $dataValue"
                    }
                ]
            }
        }
    }).render();  
    
});