Mahmut Kilic Mahmut Kilic - 3 months ago 22
HTML Question

D3.js HTML data table filter by dropdown

I am fairly new with D3.JS and javascript. I followed some tutorials to create my chart with dimple.js. Now I am trying to create HTML table with D3.js.

I was able to display all the data on HTML table, but what I really want is to only display, data associate with dropdown menu. I am not sure how to connect my dropdown button with table. I didn't find any example on here too.

I truly appreciate all the helps and feedback. I did post desired output.



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

var data = [
{ channel: "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1765, "year": 2011},
{ channel: "Supermarkets", "Price Tier": "Budget", "Unit Sales": 965, "year": 2011},
{ channel: "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 1265, "year": 2011},
{ channel: "Supermarkets", "Price Tier": "Regular", "Unit Sales": 765, "year": 2011},
{ channel: "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 1165, "year": 2011},
{ channel: "Supermarkets", "Price Tier": "Premium", "Unit Sales": 877, "year": 2011},
{ channel: "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1565, "year": 2012},
{ channel: "Supermarkets", "Price Tier": "Budget", "Unit Sales": 565, "year": 2012},
{ channel: "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 965, "year": 2012},
{ channel: "Supermarkets", "Price Tier": "Regular", "Unit Sales": 465, "year": 2012},
{ channel: "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 1322, "year": 2012},
{ channel: "Supermarkets", "Price Tier": "Premium", "Unit Sales": 777, "year": 2012},
{ channel: "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1545, "year": 2013,},
{ channel: "Supermarkets", "Price Tier": "Budget", "Unit Sales": 932, "year": 2013,},
{ channel: "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 1005, "year": 2013},
{ channel: "Supermarkets", "Price Tier": "Regular", "Unit Sales": 960, "year": 2013},
{ channel: "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 1445, "year": 2013},
{ channel: "Supermarkets", "Price Tier": "Premium", "Unit Sales": 887, "year": 2013}

];

function getData(data, year, letter) {
var extData = [];
for(var i = 0; i < data.length; i++) {
if (year != null && data[i]["year"] != year)
continue;

extData.push(data[i])
}
return extData
}

var myChart = new dimple.chart(svg, getData(data,""));
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", ["Price Tier", "channel"]);
var y =myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["channel"], dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
y.tickFormat = ".0f"
myChart.draw();


// column definitions
var columns = [
{ head: 'Channel', cl: 'title', html: ƒ('channel') },
{ head: 'Price Tier', cl: 'center', html: ƒ('Price Tier') },
{ head: 'Unit Sales', cl: 'center', html: ƒ('Unit Sales') },
{ head: 'Year', cl: 'num', html: ƒ('year') }
];

// create table
var table = d3.select('body')
.append('table');

// create table header
table.append('thead').append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.attr('class', ƒ('cl'))
.text(ƒ('head'));

// create table body
table.append('tbody')
.selectAll('tr')
.data(data).enter()
.append('tr')
.style("background-color", function(d, i){if(i%2 == 0){return "#D8D8D8";}})
.selectAll('td')
.data(function(row, i) {
return columns.map(function(c) {
// compute cell values for this specific row
var cell = {};
d3.keys(c).forEach(function(k) {
cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
});
return cell;
});
}).enter()
.append('td')
.html(ƒ('html'))
.attr('class', ƒ('cl'));

function length() {
var fmt = d3.format('02d');
return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
}




var year = null;
var letter = null;

function chartsUpdate() {
myChart.data = getData(data, year, letter);
myChart.draw(500);

}


myChart.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
year = this.text;
chartsUpdate();
});

th { text-align: left; }
th, td { padding: 0 1em 0.5ex 0;}
th.center, td.center { text-align: center; }
th.num, td.num { text-align: right; }

<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="http://dimplejs.org/dist/dimple.v2.1.6.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>
<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>



<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Select Year <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">


<li class="dropdown-submenu year">
<a tabindex="-1" href="#" >2011</a>
</li>
<li class="dropdown-submenu year">
<a tabindex="-1" href="#" >2012</a>
</li>
<li class="dropdown-submenu year">
<a tabindex="-1" href="#" >2013</a>
</li>
</ul>
</div>

<div id="chartContainer">





After selecting 2011, html table should look like this:

enter image description here

Answer

you should reduce your libraries. Just with d3 you can do everything you want. Anyway… that’s what you want: https://jsfiddle.net/andresin87/fmcd0dvo/6/ code added:

function colsUpdate() {
    ...
}

...to the method on(“click"

Comments