Commit 5fd683db authored by Krystyna Milian's avatar Krystyna Milian

Implemented filtering using dropdowns integrated with chart filtering

parent 015826ba
id,nameofshelter,zone,country,associateddisasterimmediatecause,gpslatitude,gpslongitude,climatezone,yearofconstructionfirstcompletedshelters,constructioncostperunitusd,topography
BI024,Adobe block house,Africa,Burundi,conflict related,,30.0083055556,moist tropical,2011,1000,slope
BI025,Plastic sheeting refugee shelter,Africa,Burundi,conflict related,3.3563611111,30.2743333333,moist tropical,2009,200,flat
BD021,Self Built Hut,Asia,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009,4500,
BD021,Self Built Hut,Asia Pacific,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009,4500,
HT020,"CHF, Steel Frame Shelter",Americas & Caribbean,Haiti,earthquake,18.427825-72.8627139,-72.5347444,moist tropical,2010,3000,
NP022,Luxembourg RC Shelter 2,Asia,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
\ No newline at end of file
NP022,Luxembourg RC Shelter 2,Asia Pacific,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
\ No newline at end of file
......@@ -14,14 +14,19 @@ $(document).ready(function () {
var tableChart = dc.dataTable("#shelters-table")
var topographyChart = dc.rowChart('#chart-topography');
var filterChartMap = {
'climateFilter': climateChart, 'zoneFilter': zoneChart, 'commercialFilter': undefined,
'disasterFilter': crisisChart,
'soilFilter': undefined, 'shelterTypeFilter': undefined, 'countryFilter': countryChart
}
d3.csv('/static/data/shelters-sample.csv', function (data) {
// d3.json("api/v0.1/shelters", function(dataObject) {
// var data = []
// for (var key in dataObject) {
// data.push(dataObject[key])
// }
//
// var data = []
// for (var key in dataObject) {
// data.push(dataObject[key])
// }
var dateFormat = d3.time.format('%Y');
var ndx = crossfilter(data);
......@@ -292,18 +297,36 @@ $(document).ready(function () {
function onFiltered() {
function onFiltered(chart) {
getFiltersValues();
generateShelterList(allDimensions.top(Infinity));
var value = ''
if (chart.filters().length>0) {
value = chart.filters()[chart.filters().length-1]
}
for (var filter in filterChartMap) {
var chartx = filterChartMap[filter]
if (chartx && chartx.filters() == chart.filters()) {
$('#' + filter).val(value);
}
}
}
generateShelterList(data);
initFilters()
})
d3.selectAll('#all').on('click', function () {
dc.filterAll();
dc.renderAll();
$("select").val("");
});
......@@ -334,34 +357,82 @@ $(document).ready(function () {
d3.selectAll('#zone').on('click', function () {
zoneChart.filterAll();
dc.redrawAll();
$("#zoneFilter").val("");
});
d3.selectAll('#crisis').on('click', function () {
crisisChart.filterAll();
dc.redrawAll();
$("#disasterFilter").val("");
});
d3.selectAll('#climate').on('click', function () {
climateChart.filterAll();
dc.redrawAll();
$("#climateFilter").val("");
});
d3.selectAll('#country').on('click', function () {
countryChart.filterAll();
dc.redrawAll();
$("#countryFilter").val("");
});
d3.selectAll('#cost').on('click', function () {
costChart.filterAll();
dc.redrawAll();
});
d3.selectAll('#topography').on('click', function () {
d3.selectAll('#topography').on('click', function () {
topographyChart.filterAll();
dc.redrawAll();
});
loadFilterValues()
loadFilterDomainValues()
$('select').on('change', function() {
if (this.id in filterChartMap && filterChartMap[this.id]) {
var value = this.value
filterChartMap[this.id].filterAll();
if (value) {
filterChartMap[this.id].filter(value);
}
dc.redrawAll();
}
});
function loadFilterDomainValues() {
var filters = {
'climateFilter': 'climatezone', 'zoneFilter': 'zone', 'commercialFilter': 'typeofimplementingagency',
'disasterFilter': 'associateddisasterimmediatecause',
'soilFilter': 'soiltype', 'shelterTypeFilter': 'typeofshelter', 'countryFilter': 'country'
// 'topographyFilter': 'topography'
}
for (var filterId in filters) {
var dropdown = document.getElementById(filterId)
if (dropdown) {
(function(attrName, htmlElement) {
d3.json("api/v0.1/attributes/" + encodeURI(attrName), function (valuesObject) {
// console.log(attrName + JSON.stringify(valuesObject));
if (valuesObject && valuesObject[attrName]) {
var values = valuesObject[attrName].split(';')
for (var i = 0; i < values.length; ++i) {
addOption(htmlElement, values[i], values[i]);
}
}
})
})(filters[filterId], dropdown);
}
}
}
})
......@@ -438,33 +509,6 @@ addOption = function (selectbox, text, value) {
selectbox.options.add(optn);
}
function loadFilterValues() {
var filters = {
'climateFilter': 'climatezone', 'zoneFilter': 'zone', 'commercialFilter': 'typeofimplementingagency',
'disasterFilter': 'associateddisasterimmediatecause',
'soilFilter': 'soiltype', 'shelterTypeFilter': 'typeofshelter',
// 'topographyFilter': 'topography'
}
for (var filterId in filters) {
var dropdown = document.getElementById(filterId)
if (dropdown) {
(function(attrName, htmlElement) {
d3.json("api/v0.1/attributes/" + encodeURI(attrName), function (valuesObject) {
// console.log(attrName + JSON.stringify(valuesObject));
if (valuesObject && valuesObject[attrName]) {
var values = valuesObject[attrName].split(';')
for (var i = 0; i < values.length; ++i) {
addOption(htmlElement, values[i], values[i]);
}
}
})
})(filters[filterId], dropdown);
}
}
}
......
......@@ -46,12 +46,6 @@
<select id="climateFilter">
<option value="" selected="selected">Climate</option>
<option value="" disabled>---</option>
<option value="dry moderate">dry moderate</option>
<option value="dry polar">dry polar</option>
<option value="dry tropical">dry tropical</option>
<option value="moist moderate">moist moderate</option>
<option value="moist polar">moist polar</option>
<option value="moist tropical">moist tropical</option>
</select>
</label>
<label for="zoneFilter" class="button button-drop">
......@@ -103,6 +97,14 @@
<option value="" disabled>---</option>
</select>
</label>
<label for="countryFilter" class="button button-small button-drop">
<select id="countryFilter">
<option value="" selected="selected">Country</option>
<option value="" disabled>---</option>
</select>
</label>
<!--label for="topographyFilter" class="button button-small button-drop">
<select id="topographyFilter">
<option value="" selected="selected">Topography</option>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment