var options1 = {
    id: "map",
    tooltip: {
        format: function(data) {
        	return "" + data.name + ":" + " " + (data.value || 0) + " person/km²" + "
" + "World Rank:" + " " + (data.rank) + " of 214 countries" + "
"
    	}
    }
};
var map = new C9.Map(options1);
map.draw();

map.createLayerFromGeojson({
    url: 'ne_110m_admin_0_countries.geo.json', 
    data: {
        file: {
            type: 'json',
            url: 'world-population-density.json'
        },
        process: function(data) {
            data = data.sort(function(a, b) {
                return a.value - b.value;
            });

            data.forEach(function(d, i) {
                d['rank'] = data.length - i;
            });

            return data;
        },
        condition: function(f, d) {
            return f.get('data')['iso_a2'] == d['code'];
        }
    },
    style: function(f) {
        var total = f.get('data')['value'],
            fillColor = '#4a1486';
        if (total == undefined)
            fillColor = '#ccc';
        else if (total < 20)
            fillColor = '#f2f0f7';
        else if (total >= 20 && total < 50)
            fillColor = '#dadaeb';
        else if (total >= 50 && total < 100)
            fillColor = '#bcbddc';
        else if (total >= 100 && total < 200)
            fillColor = '#9e9ac8';
        else if (total >= 200 && total < 300)
            fillColor = '#807dba';
        else if (total >= 300 && total < 500)
            fillColor = '#6a51a3';
        return [new ol.style.Style({
            fill: new ol.style.Fill({
                color: fillColor
            }),
            stroke: new ol.style.Stroke({
                color: '#c0c0c0',
                width: 1
            })
        })]    
}})

var chart = new C9.BarChart({
    id: 'chart',
    width: 550,
    height: 350,
    title: {
        text: 'Population Density of Countries'
    },
    table: {
        container: 'table',
        show: true,
        headings: ['Country', 'Population']
    }
});
var chartData = [];
chart.draw();

map.on('click', function(f) {
    var data = {name: f.get('data').name, value: f.get('data').value};
    if (chartData.filter(function(e) { return e.name == data.name && e.value == data.value; }).length == 0) {
        chartData.push(data);
        chart.updateData(chartData);
    }
})