Jump to content


fatguyfromqueens

Member Since 13 Dec 2016
Offline Last Active Feb 17 2017 10:30 PM
-----

Topics I've Started

Modal Window on entity click?

15 February 2017 - 08:02 PM

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.


Map events not working on some maps

14 December 2016 - 09:00 PM

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.fusioncha...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>
 

Drill down to multiple maps based on continent clicked

13 December 2016 - 05:36 PM

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.fusioncha...wn-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();
});