Commit 7183ea83 authored by Franziska Koehn's avatar Franziska Koehn
Browse files

chart and example data added

parent dfa0c56f
......@@ -24,7 +24,31 @@
overflow: auto;
width: 400px;
}
</style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
}
</style>
<script>
var getadddata = function() {
......@@ -36,6 +60,84 @@
},
data:{}, method:"POST" });
};
var set_field = function(sel_field){
console.log(sel_field)
$("#chart_field button").html(sel_field + '<span class="caret"></span>');
create_chart([{"count": 56, "label": "foo" }, {"count": 88, "label": "bar" }]);
};
selectTab = function(tabname, idx) {
$(tabname).addClass("hidden");
$(tabname+":eq(" + idx+ ")").removeClass("hidden");
$(tabname+"-menu > li").removeClass("active");
$(tabname+"-menu > li:eq(" + idx+ ")").addClass("active");
};
</script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var create_chart = function(data){
$("#chart").html("");
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
console.log(data);
x.domain(data.map(function(d) { return d.label; }));
y.domain([0, d3.max(data, function(d) { return d.count; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Counts");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.label); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.count); })
.attr("height", function(d) { return height - y(d.count); });
};
</script>
</head>
......@@ -62,147 +164,90 @@
{{resultcount}} Results
</div>
<script>
selectTab = function(tabname, idx) {
$(tabname).addClass("hidden");
$(tabname+":eq(" + idx+ ")").removeClass("hidden");
$(tabname+"-menu > li").removeClass("active");
$(tabname+"-menu > li:eq(" + idx+ ")").addClass("active");
};
</script>
<ul class="nav nav-tabs tabbed1-menu">
<li role="presentation" class="active" onclick="selectTab('.tabbed1',0)"><a>Table</a></li>
<li role="presentation" onclick="selectTab('.tabbed1',1)"><a>Chart</a></li>
</ul>
<div class="tabbed1">
<div class="tabbed1">
<h2 class="sub-header">List of Results</h2>
<div class="btn-group" style="margin-top: 1em; margin-bottom:2em;" role="group" aria-label="...">
{% if rest_adddata%}
<button type="button" class="btn btn-lg btn-primary" onclick="getadddata()">Get Additional Data</button>
{% endif %}
<a href="/downl_csv"><button type="button" class="btn btn-lg btn-default">Export as CSV</button></a>
</div>
<h2 class="sub-header">List of Results</h2>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
{% if rest_downl%}
<th></th>
{% endif %}
<div class="btn-group" style="margin-top: 1em; margin-bottom:2em;" role="group" aria-label="...">
{% if rest_adddata%}
<button type="button" class="btn btn-lg btn-primary" onclick="getadddata()">Get Additional Data</button>
{% endif %}
<a href="/downl_csv"><button type="button" class="btn btn-lg btn-default">Export as CSV</button></a>
</div>
{% for field in roottypefields %}
<th>{{field["label"]}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for r in results %}
<tr>
{% if r["rest"] %}
<td style="text-align: center; vertical-align: middle;">
<a href="/download?url={{r['rest']}}"><button type="button" class="btn btn-lg btn-primary" >Download</button></a>
</td>
{% endif %}
{% for field in roottypefields %}
<td>{{r[field["key"]]}}</td>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
{% if rest_downl%}
<th></th>
{% endif %}
{% for field in roottypefields %}
<th>{{field["label"]}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for r in results %}
<tr>
{% if r["rest"] %}
<td style="text-align: center; vertical-align: middle;">
<a href="/download?url={{r['rest']}}"><button type="button" class="btn btn-lg btn-primary" >Download</button></a>
</td>
{% endif %}
{% for field in roottypefields %}
<td>{{r[field["key"]]}}</td>
{% endfor %}
</tr>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</div>
<div class="tabbed1 hidden">
<h2 class="sub-header">Chart</h2>
<div class="input-group">
<span class="input-group-addon">Field</span>
<div class="btn-group" role="group">
<div class="btn-group" role="group" id="chart_field">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Choose a Field!
Choose a field!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for field in roottypefields %}
<li role="presentation"><a role="menuitem" tabindex="-1" href="">{{field["label"]}}</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" onclick="set_field('{{field["label"]}}') ">{{field["label"]}}</a></li>
{% endfor %}
</ul>
</div>
</div>
<script type="text/javascript">
var m = [30, 10, 10, 30],
w = 960 - m[1] - m[3],
h = 930 - m[0] - m[2];
var format = d3.format(",.0f");
var x = d3.scale.linear().range([0, w]),
y = d3.scale.ordinal().rangeRoundBands([0, h], .1);
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("sample-data.csv", function(data) {
// Parse numbers, and sort by value.
data.forEach(function(d) { d.value = +d.value; });
data.sort(function(a, b) { return b.value - a.value; });
// Set the scale domain.
x.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain(data.map(function(d) { return d.name; }));
var bar = svg.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.value); })
.attr("height", y.rangeBand());
<div id="chart"></div>
<script>
create_chart([{"count": 100, "label": "foo" }, {"count": 50, "label": "bar" }]);
</script>
bar.append("text")
.attr("class", "value")
.attr("x", function(d) { return x(d.value); })
.attr("y", y.rangeBand() / 2)
.attr("dx", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return format(d.value); });
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</div>
</div>
</div>
</body>
......
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