Sign in to follow this  
evanchai

set drill down map for each city separately

Recommended Posts

I am try do show a country map and want to click each city in the country ,it can drill down to the next level city map.

However I still can not find a method can set the map for each city separately ?

Such as  click "Shanghai" then drill to "maps/shanghai", click "Beijing" then drill to "maps/beijing"

What Can I do ? Thank you in advance.

 

Evan 

 

CODE:

1.

            "data": [
                {
                    "id": "CN.SH",
                    "value": "515",
                    "link": "newchart-json-SH"
                }
             ]
2.
"linkeddata": [{
                "id": "SH",
                "linkedchart": {
 
            "chart": {
 
                "caption": "Shanghai",
                "theme": "fint",
                "formatNumberScale":"0",
                "numberSuffix":"M",
                "showLabels": "1",
                "labelSepChar": ": ",
                "includeValueInLabels": "1",
                "useSNameInLabels": "1"
                }
            }
      }]
3.
populationMap.configureLink({
 
        "type": "maps/shanghai"}, 0);
Edited by evanchai

Share this post


Link to post
Share on other sites

Hi,

 

You need to set the link attribute in this way:

 

"link": "newchart:(map_name)-(data_format)"

Eg:

"link": "newchart:asia-json"

 

Please check this fiddle for a demo:

http://jsfiddle.net/nabajeet_fusioncharts/jm3otwe7/

 

You may check this link for more info:

http://docs.fusioncharts.com/tutorial-map-guide-adding-drill-down-to-maps.html

 

Thanks,

Share this post


Link to post
Share on other sites

Hi Nabajeet:

 

Thanks for ur advices, it works now , but I have another question. 

 

My fusionMap is version 3.7.0,it works well on safari and chrome, but doesn't show any map in the IE8(which is my target users' browser).

 

However, from this link ,http://www.fusioncharts.com/charts/fusionmaps/?map=us-employment-distribution-map, which IE 8 can view the maps there?

 

How can I set my code to meet the requirement on IE8?

 

Thanks in advance.

 

Evan

 

My code is as below:

<!doctype html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=no-js lang=en> <!--<![endif]-->
<head>
    <title>A Data Driven Map</title>
    <script type="text/javascript" src="js/fusioncharts.js"></script>
    <script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
    var populationMap = new FusionCharts({
        type: 'maps/world',
        renderAt: 'chart-container',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: {
                "chart": {
                "caption": "Global Population",
                "theme": "fint",
                "formatNumberScale":"0",
                "numberSuffix":"M"
            },
            "colorrange": {
                "color": [
                    {
                        "minvalue": "0",
                        "maxvalue": "100",
                        "code": "#E0F0E0",
                        "displayValue" : "Below 100M"
                    },
                    {
                        "minvalue": "100",
                        "maxvalue": "500",
                        "code": "#D0DFA3",
                        "displayValue" : "100-500M"
                    },
                    {
                        "minvalue": "500",
                        "maxvalue": "1000",
                        "code": "#B0BF92",
                        "displayValue" : "500-1000M"
                    },
                    {
                        "minvalue": "1000",
                        "maxvalue": "5000",
                        "code": "#91AF64",
                        "displayValue" : "Above 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"
                }
            ]
        }
    }).render();
});
</script>
</head>
<body>
<div id="chart-container">A world map will load here!</div>
</body>
</html>

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
Sign in to follow this