fatguyfromqueens

Drill down to multiple maps based on continent clicked

Recommended Posts

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

Share this post


Link to post
Share on other sites
Hi,

 

To create a worldmap which redirects to a continent map on clicking the entity object, you need to set an entityclick FusionCharts api event which on clicking will show you the respective continent maps.

 

For information regarding entityclick FusionCharts api event please visit here.

 

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


 

Hope this helps.

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