fatguyfromqueens Report post Posted December 14, 2016 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
Ayan Bhadury Report post Posted December 15, 2016 (edited) 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 http://jsfiddle.net/ayanbhaduryfc/eqavf29c/ Hope this helps. Edited December 15, 2016 by Ayan Bhadury Share this post Link to post Share on other sites
fatguyfromqueens Report post Posted January 3, 2017 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
Ayan Bhadury Report post Posted January 4, 2017 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 http://jsfiddle.net/ayanbhaduryfc/p5prmd5a/ Share this post Link to post Share on other sites
