Commit 184cc9cf authored by Franziska Koehn's avatar Franziska Koehn
Browse files

chart finished

parent 3c015e67
......@@ -29,6 +29,34 @@ def step1():
roottypefields=roottypefields, roottypefieldsjson=roottypefieldsjson)
@app.route("/set_chart_field", methods=["GET"])
def set_chart_field():
from xsa.chart import count_substrings
from xsa.datatypereader import get_field_key_by_label
import json
field_label = request.args.get("f")
field_key = get_field_key_by_label(state["roottype"], field_label)
strings = []
for r in state["results"]:
strings.append(r[field_key])
substrings = request.args.get("s").split(',')
data_dict=[]
for c in count_substrings(substrings, strings):
new_dict = {}
new_dict['count'] = c[1]
new_dict['label'] = c[0]
data_dict.append(new_dict)
data_json = json.dumps(data_dict)
width=request.args.get("w")
return render_template("chart.html", chart_data=data_json, chart_max=len(state["results"]), chart_width=width)
@app.route("/set_root_type", methods=["GET"])
def set_root_type():
state["roottype"] = request.args.get("t")
......
<!-- based on http://bl.ocks.org/mbostock/3885304 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var create_chart = function(data, c_width){
$("#chart").html("");
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = c_width - 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 + ")");
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); })
.append("title")
.text(function(d) {
return d.count;});
};
</script>
<script>
var model = {{chart_data|safe}};
var c_width = {{chart_width|safe}};
var max = {{chart_max|safe}};
create_chart(model, c_width);
</script>
......@@ -19,11 +19,8 @@
<link href="static/dashboard.css" rel="stylesheet">
<style type="text/css">
.boxes {
height: 150px;
overflow: auto;
width: 400px;
}
#ig_field { margin-bottom: 1em; }
input {margin-right: 0.5em;}
.bar {
fill: steelblue;
......@@ -50,95 +47,58 @@
}
</style>
<script>
var getadddata = function() {
$.ajax("/get_adddata", { success: function(data) { console.log(data);
var newDoc = document.open("text/html", "replace");
newDoc.write(data);
newDoc.close();
window.history.pushState("", $("title").text(), "/get_adddata");
},
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 src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var getadddata = function() {
$.ajax("/get_adddata", { success: function(data) {
var newDoc = document.open("text/html", "replace");
newDoc.write(data);
newDoc.close();
window.history.pushState("", $("title").text(), "/get_adddata");
},
data:{}, method:"POST" });
};
var selected_field = "";
var update_chart = function(sel_field){
if (sel_field === undefined) {
sel_field=selected_field;
}
else{
selected_field=sel_field;
}
if(sel_field === ""){
return;
}
var subs = [];
var c_width = $("#chart").width();
$('input[type="text"]').each(function(){ subs.push($(this).val()) });
$("#chart_field button").html(sel_field + '<span class="caret"></span>');
$('#chart').load("/set_chart_field?f="+sel_field+"&s="+ subs+"&w="+c_width);
};
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>
var add = function(removeable){
var child=document.createElement("p");
var parent=document.getElementById("subs_con");
parent.appendChild(child);
$("<input placeholder='substring' type='text'></input>").on("keyup",function(){ update_chart(); }).appendTo(child);
if (removeable){ $("<a href='Javascript:'>X</a>").on("click", remove_cb).appendTo(child);}
};
var remove_cb = function(){
$(this).parents('p').remove();
update_chart();
};
</script>
</head>
......@@ -165,8 +125,8 @@
</div>
<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>
<li role="presentation" class="active" onclick="selectTab('.tabbed1',0)"><a href='Javascript:'>Table</a></li>
<li role="presentation" onclick="selectTab('.tabbed1',1)"><a href='Javascript:'>Chart</a></li>
</ul>
<div class="tabbed1">
......@@ -175,7 +135,7 @@
<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>
<button type="button" class="btn btn-lg btn-default" 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>
......@@ -212,43 +172,51 @@
</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" id="chart_field">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
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" onclick="set_field('{{field["label"]}}') ">{{field["label"]}}</a></li>
{% endfor %}
<div class="row">
</ul>
</div>
</div>
<div class="col-md-3">
<div id="ig_field" class="input-group">
<span class="input-group-addon">Field</span>
<div id="chart"></div>
<script>
create_chart([{"count": 100, "label": "foo" }, {"count": 50, "label": "bar" }]);
</script>
<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!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for field in roottypefields %}
<li role="presentation"><a role="menuitem" tabindex="-1" onclick="update_chart('{{field["label"]}}') ">{{field["label"]}}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div id="subs_con">
<script> add(false);</script>
</div>
<button onclick="add(true)">+</button>
</div>
<div id="chart" class="col-md-9"></div>
</div>
</div>
</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