var svg = dimple.newSvg("#chartContainer", 570, 400);

var data = [

    {"Point":"France","Population":10.92,"Year":2013,"Percent":1.689,"continent":"HotForex"},

    {"Point":"Germany","Population":82.13,"Year":2013,"Percent":0.689,"continent":"HotForex"},

    {"Point":"France","Population":60.91,"Year":2000,"Percent":0.689,"continent":"HotForex"},

    {"Point":"Germany","Population":2.21,"Year":2000,"Percent":3.689,"continent":"HotForex"},

​

    {"Point":"Turkey","Population":75.01,"Year":2013,"Percent":1.689,"continent":"Middle East"},

    {"Point":"Iran","Population":77.15,"Year":2013,"Percent":0.689,"continent":"Middle East"},

    {"Point":"Turkey","Population":63.24,"Year":2000,"Percent":0.689,"continent":"Middle East"},

    {"Point":"Iran","Population":65.85,"Year":2000,"Percent":3.689,"continent":"Middle East"},];

​

​

function getData(data, key) {

    var extData = [];

    if(key === "")

    {

        return data;

    }

    for(var i = 0; i < data.length; i++) {

        if(data[i]["continent"] == key) {

            extData.push(data[i]);

        }

    }

    return extData;

}   

var myChart = new dimple.chart(svg, getData(data,""));

var x = myChart.addCategoryAxis("x", ["Point","Year"]);

var y = myChart.addMeasureAxis("y", "Population");

var series1 = myChart.addSeries( "Point", dimple.plot.bar);

x.showGridlines = true;

​

​

var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");

myChart.draw();

​

          d3.selectAll('.dropdown-submenu > a').on("click", function(d) {

                myChart.data = getData(data,this.text);

                myChart.draw(500);

          });

​

​

​

​