FusionCharts API Event: markerRollOver

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.maps.js"></script>
<script src="https://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the event parameters, and their values, when markerRollOver event is triggered-->
<div id="indicatorDiv">Event name: <strong> markerRollOver </strong> 
    
    <p>Triggered when the mouse pointer is rolled over a marker on a map.</p>
    <p>All events, when triggered, will provide two parameters for the handler - <strong> eventObj </strong> (object containing information generic to all events) and <strong> dataObj </strong> (object containing information specific to an event).</p>
    <p>Roll the mouse pointer over a marker on the map to trigger the event. Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</p>
    
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong {
  font-weight: bold;
}
#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

FusionCharts.ready(function () {
    var officeLoc = new FusionCharts({
        type: 'usa',
        renderAt: 'chart-container',
        width: '500',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "theme": "fint",
                    "useHoverColor": "0",
                    "caption": "Harry's SuperMart Office Locations",
                    "subcaption": "Head Office and Zonal Offices",
                    "fillColor": "#b4ddb0",
                    "borderColor": "#ffffff",
                    "showCanvasBorder": "0",
                    "showShadow": "0",
                    "showLabels": "0",
                    "markerRadius": "10",
                    "markerBorderColor": "#000000",
                //Used to enable marker hover effect                
                "showMarkerHoverEffect": "1",
                //Used to change marker fill color
                "markerFillColor": "#6baa01",
                //Used to change marker border thickness on hover
                "markerBorderThickness": "2",
                //Used to change marker fill color on hover                
                "markerFillHoverColor": "#4ae5e7",
                //Used to change marker border color on hover 
                "markerBorderHoverColor": "#333333",
                //Used to change marker border thickness on hover 
                "markerBorderHoverThickness": "4"
            },
                "markers": {
                "application": [{
                    "id": "west-zone-ho-1",
                        "shapeId": "zo-shape"
                }, {
                    "id": "west-zone-ho-2",
                        "shapeId": "zo-shape"
                }, {
                    "id": "mid-west-zone-ho",
                        "shapeId": "hdo-shape"
                }, {
                    "id": "north-east-ho",
                        "shapeId": "zo-shape"
                }, {
                   ...