var svg = dimple.newSvg("#chartContainer", 570, 400);
var data = [
{"Point":"France","Population":65.92,"Year":2013,"Percent":1.689,"continent":"Europe"},
{"Point":"Germany","Population":82.13,"Year":2013,"Percent":0.689,"continent":"Europe"},
{"Point":"Italy","Population":60.23,"Year":2013,"Percent":2.689,"continent":"Europe"},
{"Point":"Greece","Population":10.96,"Year":2013,"Percent":0.689,"continent":"Europe"},
{"Point":"Belgium","Population":11.18,"Year":2013,"Percent":3.689,"continent":"Europe"},
{"Point":"France","Population":60.91,"Year":2000,"Percent":0.689,"continent":"Europe"},
{"Point":"Germany","Population":82.21,"Year":2000,"Percent":3.689,"continent":"Europe"},
{"Point":"Italy","Population":56.94,"Year":2000,"Percent":0.689,"continent":"Europe"},
{"Point":"Greece","Population":10.80,"Year":2000,"Percent":0.689,"continent":"Europe"},
{"Point":"Belgium","Population":10.25,"Year":2000,"Percent":0.689,"continent":"Europe"},
{"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":"Israel","Population":8.05,"Year":2013,"Percent":2.689,"continent":"Middle East"},
{"Point":"Egypt","Population":87.61,"Year":2013,"Percent":0.689,"continent":"Middle East"},
{"Point":"Jordan","Population":6.46,"Year":2013,"Percent":3.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"},
{"Point":"Israel","Population":6.28,"Year":2000,"Percent":0.689,"continent":"Middle East"},
{"Point":"Egypt","Population":68.33,"Year":2000,"Percent":0.689,"continent":"Middle East"},
{"Point":"Jordan","Population":4.79,"Year":2000,"Percent":0.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;
x.addOrderRule("Date");
var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");
myChart.draw();
// This is a critical step. By doing this we orphan the legend. This
// means it will not respond to graph updates. Without this the legend
// will redraw when the chart refreshes removing the unchecked item and
// also dropping the events we define below.
myChart.legends = [];
// This block simply adds the legend title. I put it into a d3 data
// object to split it onto 2 lines. This technique works with any
// number of lines, it isn't dimple specific.
svg.selectAll("title_text")
.data(["Click legend to","show/hide owners:"])
.enter()
.append("text")
.attr("x", 499)
.attr("y", function (d, i) { return 80 + i * 14; })
.style("font-family", "sans-serif")
.style("font-size", "10px")
.style("color", "Black")
.text(function (d) { return d; });
// Get a unique list of Owner values to use when filtering
var filterValues = dimple.getUniqueValues(data, "Point");
// Get all the rectangles from our now orphaned legend
myLegend.shapes.selectAll("rect")
// Add a click event to each rectangle
.on("click", function (e) {
// This indicates whether the item is already visible or not
var hide = false;
var newFilters = [];
// If the filters contain the clicked shape hide it
filterValues.forEach(function (f) {
if (f === e.aggField.slice(-1)[0]) {
hide = true;
} else {
newFilters.push(f);
}
});
// Hide the shape or show it
if (hide) {
d3.select(this).style("opacity", 0.2);
} else {
newFilters.push(e.aggField.slice(-1)[0]);
d3.select(this).style("opacity", 0.8);
}
// Update the filters
filterValues = newFilters;
// Filter the data
myChart.data = dimple.filterData(data, "Point", filterValues);
// Passing a duration parameter makes the chart animate. Without
// it there is no transition
myChart.draw(500);
});
d3.selectAll('.dropdown-submenu > a').on("click", function(d) {
myChart.data = getData(data,this.text);
myChart.draw(500);
});
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Continent <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#" >Europe</a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#" >Middle East</a>
</li>
</ul>
</div>
<div id="chartContainer">