fatguyfromqueens

Hello. Great product but I am running into a problem. I am trying to create a world map where when you click on a continent, it goes to the continent map. I've looked at the tutorial (http://www.fusioncharts.com/dev/map-guide/adding-drill-down-to-maps.html) and also a previous post (http://forum.fusioncharts.com/topic/16778-set-drill-down-map-for-each-city-separately/) but still can't seem to "get it." The tutorial and the post seem to differ slightly in implementation so I am confused. So how would I construct this? Thanks very much! Code below. FusionCharts.ready(function() { var pubsByGeo = new FusionCharts( { "type": "maps/world", "renderAt": "mapdiv", "width": "900", "height": "600", "dataFormat": "json", "dataSource": { "chart": { "caption": "FGMC Publications", "subcaption": "Click on a Continent to view publications", "theme": "fint", "formatNumberScale": "0", "showLabels": "1", "nullEntityColor": "#C2C2D6", "nullEntityAlpha": "50", "hoverOnNull": "0", "useSNameInLabels": "0", "entityFillColor": "#A8A8A8", "entityFillHoverColor": "#E5E5E9" }, "data": [ { "id": "NA", "displayValue": "North America", "link": "newchart-northamerica-json" }, { "id": "SA", "displayValue": "South America", "link": "newchart-southamerica-json" }, { "id": "AS", "value": "247", "showLabel": "1" }, { "id": "EU", "value": "188.5", "showLabel": "1" }, { "id": "AF", "value": "87.2", "showLabel": "1" }, { "id": "AU", "value": "8.32", "showLabel": "1" } ], "linkeddata": [ { "id": "NA", "linkedchart": { "chart": { "caption": "North America", "subcaption": "Click on a country to see publications.", "entityFillHoverColor": "#E5E5E9", "showLabels": "1", "entityFillColor": "#A8A8A8", "theme": "fint", "showBorder": "1", "bordercolor": "#FFFFFF", "entityborderThickness": "3" }, "colorrange": { "startlabel": "Low", "endlabel": "High", "code": "#e44a00", "minvalue": "0", "gradient": "1", "color": [ { "maxvalue": "150", "displayvalue": "Average", "code": "#f8bd19" }, { "maxvalue": "600", "code": "#6baa01" } ] }, "data": [ { "id": "CA", "value": "99" }, { "id": "US", "value": "99" }, { "id": "MX", "value": "90" } ] }, "id": "SA", "linkedchart": { "chart": { "caption": "South America", "subcaption": "Click on a country to see its publications", "entityFillHoverColor": "#E5E5E9", "showLabels": "1", "entityFillColor": "#A8A8A8", "theme": "fint", "showBorder": "1", "bordercolor": "#FFFFFF", "entityborderThickness": "3" }, "colorrange": { "startlabel": "Low", "endlabel": "High", "code": "#e44a00", "minvalue": "0", "gradient": "1", "color": [ { "maxvalue": "150", "displayvalue": "Average", "code": "#f8bd19" }, { "maxvalue": "600", "code": "#6baa01" } ] }, "data": [ { "id": "CO", "displayValue": "Colombia" }, { "id": "BR", "displayValue": "Brazil" }, { "id": "AR", "displayValue": "Argentina" } ] } } ] } }); pubsByGeo.render(); });

Hello We are working with Fusion maps and liking it. We have a map that has custom info when a user mouses over a country. The info for each country is a list of links to studies the user can download. What I'd like to do is have that list open in a modal window on entity click. I think I can do it, but just wonder if it has been done, is it possible with fusionmaps (so I don't waste time) and best practices for that if any. Thanks Craig Siave.

Thank you so much! This is exactly what I need. Began to hack at it and sort of got a modal but not as clean and as nice as this. Thanks again. Craig Savel

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>

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>

HI Thanks, I think I got it to work, but I have another problem, will open another thread just in case someone else can use whatever answer you give.