World countries and bar chart - World countries and bar charts

World countries and bar charts

keyboard_arrow_leftGo back
Open in JSFiddle
JavaScript
chart= new GeoChart({
    "layers": [
        {
            "id": "barPositions",
            "type": "items",
            "data": {
                "id": "gdp"
            },
            "aggregation": {
                "enabled": true,
                "distance": 70,
                "weightFunction": function (node) {
                        var sum = 0;
                        for (var key in node.gdp) {
                            if ({}.hasOwnProperty.call(node.gdp, key)) {
                                sum += node.gdp[key];
                            }
                        }
                        return sum;
                    }
                },
                "style": {
                    "nodeAutoScaling": null,
                    "nodeStyleFunction": function (node) {
                        var r;

                        r = node.data.aggregatedWeight;
            
                        // in order to fit nodes on the chart, display the radius in a logarithmic scale
                        node.radius = 0;

                        // Show the country names, if an aggregation contains only 1 node
                        aggr = node.data.aggregatedNodes;
                        node.label = "";
                    },
                "node": {
                    "radius": 0,
                    "fillColor": "#2fc32f",
                    "lineColor": "#b0dc0b",
                    "label": "",
                    "display": "droplet"
                },
                "nodeHovered": {
                    "shadowColor": "#eab404"
                },
                "nodeLabel": {
                    "backgroundStyle": {
                        "fillColor": "transparent",
                        "lineColor": "transparent"
                    },
                    "textStyle": {
                        "fillColor": "#6f52b8"
                    }
                },
                "removedColor": null
            }
        },
        {
            "id": "bar",
            "type": "charts",
            "shapesLayer": "barPositions",
            "chartType": "facetchart",
            "settingsFunction": function (node, data) {
                     aggr = data.aggregatedNodes;

                    var barData = {subvalues: []};

                    // When displaying aggregated GDP of a region, summarize the GDP sectors
                    var gdp = {
                        Agriculture: 0,
                        Industry: 0,
                        Service: 0
                    };
                    for (var i = 0; i < aggr.length; i++) {
                        var c = aggr[i];
                        for (var j in c.gdp) {
                            if ({}.hasOwnProperty.call(gdp, j)) {
                                gdp[j] += c.gdp[j];
                            }
                        }
                    }
                    var radius = 0;
                    for (var key in gdp) {
                        if ({}.hasOwnProperty.call(gdp, key)) {
                            barData.subvalues.push({
                                value: gdp[key],
                                name: key
                            });
                        }
                    }
                    return {
                        data: {
                            preloaded: barData
                        },
                        info: {
                            contentsFunction: function (data) {
                                return "" + data.name + " " + data.value.toLocaleString() + "M $";
                            }
                        }
                    };
                }
        }
    ],
    "navigation": {
        "initialLat": 30,
        "initialLng": 10,
        "initialZoom": 2
    },
    "background": {
        "enabled": true,
        "type": "tile",
        "url": "https:\/\/maps.zoomcharts.com\/{z}\/{x}\/{y}.png",
        "params": {
            "attribution": "\u00a9 OpenStreetMap<\/a> contributors"
        }
    },
    "container": "demo",
    "data": [
        {
            "id": "gdp",
            "url": "\/\/dvsl\/data\/extra\/nominal-gdp-world.json",
            "perBoundsData": false
        }
    ],
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})
HTML
      <script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
      <div id="demo"></div>
                  
//