fatguyfromqueens

Map events not working on some maps

Recommended Posts

Hi, 

Am trying to work through the events tutorial because that is what we need and I have a problem and can't seem to get it. 

 

Using your tutorial here http://www.fusioncharts.com/dev/map-guide/listening-to-map-events.htmlmy world map works fine. Teh box in the bottom shows the population of the continent on mouseover

 

When I use a map of a continent I get null where the population should be. IN other words when I mouseover a country I get "Population nullM" instead of a number. In addition the coutinent shows uniform blue. SO I must be doing something wrong, but the only thing I change is the map name, and the two letter codes. You can see the scripts on the bottom. Even tried it with your numeircal code instead of country code, but no good. I am mystified. Any help you can give is appreciated.

 

 

GOOD CODE

<script>
FusionCharts.ready(function() {
    var populationMap = new FusionCharts({
        type: 'maps/world',
        renderAt: 'mapdiv',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "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": "NA",
                "value": "515"
            }, {
                "id": "SA",
                "value": "373"
            }, {
                "id": "AS",
                "value": "3875"
            }, {
                "id": "EU",
                "value": "727"
            }, {
                "id": "AF",
                "value": "885"
            }, {
                "id": "AU",
                "value": "32"
            }],
        },
        "events": {
            "entityRollover": function(evt, data) {
                document.getElementById('message').value = "" + data.label + "\n" + "Population: " + data.value + "M";
            },
            "entityRollout": function(evt, data) {
                document.getElementById('message').value =
                    "Total World Population - 6.3 Billion";
            },
            "entityClick": function(evt, data) {
                alert("You have clicked on " + data.label + ".");
            },
        }
    }).render();
});
</script>
 
BAD CODE
 
<script>
FusionCharts.ready(function() {
    var populationMap = new FusionCharts({
        type: 'maps/africa',
        renderAt: 'mapdiv',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Africa 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": "ZA",
                "value": "515"
            }, {
                "id": "EG",
                "value": "373"
            }, {
                "id": "BW",
                "value": "3875"
            }, {
                "id": "BJ",
                "value": "727"
            }, {
                "id": "KE",
                "value": "885"
            }, {
                "id": "DZ",
                "value": "32"
            }],
        },
        "events": {
            "entityRollover": function(evt, data) {
                document.getElementById('message').value = "" + data.label + "\n" + "Population: " + data.value + "M";
            },
            "entityRollout": function(evt, data) {
                document.getElementById('message').value =
                    "Total World Population - 6.3 Billion";
            },
            "entityClick": function(evt, data) {
                alert("You have clicked on " + data.label + ".");
            },
        }
    }).render();
});
</script>
 

Share this post


Link to post
Share on other sites
Hi,

 

The reason you are getting "Population : nullM"  instead of number because you are using the shortlabel as "id" in the data object, please use the appropriate id for each entity to get it worked.

 

For reference regarding the specification sheet of map of Africa please visit here.

 

For further reference please visit the fiddle link and check the sample code  


 

Hope this helps.
Edited by Ayan Bhadury

Share this post


Link to post
Share on other sites

Thank you.

 

One more question.

 

What I am trying to do, following the model of this map, is to have different content in a box on mouseover. The content is NOT numeric and that seems to cause an issue. am using displayValue for each data item and not getting anything. Here is code. 

Thanks!

 

<?php
// Start the session
session_start();
 
?>
<!DOCTYPE html>
<html lang="en" xmlns:background="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="FGM/C">
 
    <title>Database of FGM/C interventions and Research Studies</title>
    <!-- finally map plugins -->
    <script src="<?php echo base_url('assets/fusioncharts/js/fusioncharts.js') ?>"></script>
     <script src="<?php echo base_url('assets/fusioncharts/js/fusioncharts.maps.js') ?>"></script>
    <script src="<?php echo base_url('assets/fusioncharts/js/themes/fusioncharts.theme.fint.js') ?>"></script>
<script>
FusionCharts.ready(function() {
    var populationMap = new FusionCharts({
        type: 'maps/africa',
        renderAt: 'mapdiv',
        width: '600',
        height: '400',
        dataFormat: 'json',
        displayValue: '1',
        dataSource: {
            "chart": {
                "caption": "Africa",
                "theme": "fint",
                "formatNumberScale": "0",
                "numberSuffix": "M",
                "showLabels": "1",
                "showToolTip": "0"
            },
            
            "data": [{
                "id": "045",
                "value": "515",
                "displayValue": "five fifteen",
              
            }, {
                "id": "015",
                "value": "373"
            }, {
                "id": "004",
                "value": "3875"
            }, {
                "id": "003",
                "value": "727"
            }, {
                "id": "023",
                "value": "885"
            }, {
                "id": "001",
                "value": "32"
            }],
        },
        "events": {
            "entityRollover": function(evt, data) {
                document.getElementById('message').value = "" + data.label + "\n" + "results: " + data.displayValue;
            },
            "entityRollout": function(evt, data) {
                document.getElementById('message').value =
                    "Africa map";
            },
            "entityClick": function(evt, data) {
                alert("You have clicked on " + data.label + " " + data.displayValue + ".");
            },
        }
    }).render();
});
</script>
 
    <link href="<?php echo base_url('assets/css/bootstrap.css') ?>" rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        #mapid { height: 180px; }
 
    </style>
    <link href="<?php echo base_url('assets/css/bootstrap-responsive.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/css/justified-nav.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/chosen/chosen.css')?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/css/fgmc.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/css/simple-slideshow-styles.css') ?>" rel="stylesheet">
 
 
 
</head>
<body>
 
<!-- The justified navigation menu is meant for single line per list item.
          Multiple lines will require custom code not provided by Bootstrap. -->
<div class="container">
    <div class="masthead">
        <h4 class="text-muted formholder"> <form name="kwikeesearch" id="kwikeesearch" action="/fgmc/index.php/searchprocess" method="GET">
                Quick search:  <input type="text" name="kw_searchterm">
            </form></h4>
        <nav class="topnavver">
            <ul class="nav nav-justified">
                 <li class="active"><a href="<?php echo base_url('/');?>">Home</a></li>
                <li> <a href="<?php echo base_url('index.php/search');?>">Interventions</a></li>
                 <li><a href="<?php echo base_url('index.php/resources');?>">Research Studies</a></li>
                 <li><a href="<?php echo base_url('index.php/partners');?>">Other Links</a></li>
 
            </ul>
        </nav>
    </div>

Share this post


Link to post
Share on other sites
Hi,

 

Thanks for replying back.

 

Yes it is possible to fetch displayvalue on "entityRollover" event, using the property 'sender' of the event object, which returns the FusionCharts object, also you need to fetch the JSON data using "getJSONData()" method which will return all the chart object, as a result you will be able to extract the corresponding displayValue of the data object.

 

For further information regarding getJSONData method check here.

 


For further reference please visit the fiddle link and check the sample code  


Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now