mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-27 00:07:16 +00:00
add: stacked barchart, resize chart
This commit is contained in:
Terrtia
parent
0e5a7d8d47
commit
c2a976e907
3 changed files with 214 additions and 194 deletions
|
|
@ -63,8 +63,8 @@ def base64Decoded_page():
|
||||||
date_to = request.args.get('date_to')
|
date_to = request.args.get('date_to')
|
||||||
type = request.args.get('type')
|
type = request.args.get('type')
|
||||||
|
|
||||||
#date_from = '20180628'
|
#date_from = '20180628' or date_from = '2018-06-28'
|
||||||
#date_to = '20180628'
|
#date_to = '20180628' or date_to = '2018-06-28'
|
||||||
|
|
||||||
if type is not None:
|
if type is not None:
|
||||||
#retrieve + char
|
#retrieve + char
|
||||||
|
|
@ -218,7 +218,7 @@ def range_type_json():
|
||||||
date_to = request.args.get('date_to')
|
date_to = request.args.get('date_to')
|
||||||
|
|
||||||
date_from = '20180601'
|
date_from = '20180601'
|
||||||
date_to = '20180706'
|
date_to = '20180709'
|
||||||
|
|
||||||
date_range = []
|
date_range = []
|
||||||
if date_from is not None and date_to is not None:
|
if date_from is not None and date_to is not None:
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,10 @@
|
||||||
}
|
}
|
||||||
.bar:hover{
|
.bar:hover{
|
||||||
fill: brown;
|
fill: brown;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.bar_stack:hover{
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.svgText {
|
.svgText {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
@ -102,7 +106,11 @@
|
||||||
|
|
||||||
<!-- /#page-wrapper -->
|
<!-- /#page-wrapper -->
|
||||||
{% if l_64|length != 0 %}
|
{% if l_64|length != 0 %}
|
||||||
<h3> Today Base64 files: </h3>
|
{% if date_from|string == date_to|string %}
|
||||||
|
<h3> {{ date_from }} Base64 files: </h3>
|
||||||
|
{% else %}
|
||||||
|
<h3> {{ date_from }} to {{ date_to }} Base64 files: </h3>
|
||||||
|
{% endif %}
|
||||||
<table id="tableb64" class="red_table table table-striped table-bordered">
|
<table id="tableb64" class="red_table table table-striped table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -159,6 +167,7 @@
|
||||||
<!-- /.row -->
|
<!-- /.row -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
var chart = {};
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
activePage = "page-base64Decoded"
|
activePage = "page-base64Decoded"
|
||||||
$("#"+activePage).addClass("active");
|
$("#"+activePage).addClass("active");
|
||||||
|
|
@ -201,14 +210,18 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
{% if type %}
|
{% if type %}
|
||||||
barchart_type('/base64Decoded/hash_by_type_json?type={{type}}', '#barchart_type');
|
chart.stackBarChart =barchart_type('/base64Decoded/hash_by_type_json?type={{type}}', '#barchart_type');
|
||||||
{% endif %}
|
{% elif daily_type_chart %}
|
||||||
{% if daily_type_chart %}
|
chart.stackBarChart =barchart_type('/base64Decoded/daily_type_json?date={{daily_date}}', '#barchart_type');
|
||||||
barchart_type('/base64Decoded/daily_type_json?date={{daily_date}}', '#barchart_type');
|
{% else %}
|
||||||
{% endif %}
|
chart.stackBarChart = barchart_type_stack('url', 'id')
|
||||||
{% if not daily_type_chart and not daily_type_chart%}
|
chart.onResize();
|
||||||
barchartstack_type('url', 'id');
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
chart.onResize();
|
||||||
|
$(window).on("resize", function() {
|
||||||
|
chart.onResize();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -265,6 +278,168 @@ function sparklines(id, points) {
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var margin = {top: 20, right: 55, bottom: 30, left: 40},
|
||||||
|
width = 1000 - margin.left - margin.right,
|
||||||
|
height = 500 - margin.top - margin.bottom;
|
||||||
|
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
|
||||||
|
|
||||||
|
var y = d3.scaleLinear().rangeRound([height, 0]);
|
||||||
|
|
||||||
|
var xAxis = d3.axisBottom(x);
|
||||||
|
|
||||||
|
var yAxis = d3.axisLeft(y);
|
||||||
|
|
||||||
|
var color = d3.scaleOrdinal(d3.schemeSet3);
|
||||||
|
|
||||||
|
var svg = d3.select("#barchart_type").append("svg")
|
||||||
|
.attr("id", "thesvg")
|
||||||
|
.attr("viewBox", "0 0 1000 500")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
function barchart_type_stack(url, id) {
|
||||||
|
|
||||||
|
d3.json("/base64Decoded/range_type_json")
|
||||||
|
.then(function(data){
|
||||||
|
|
||||||
|
var labelVar = 'date'; //A
|
||||||
|
var varNames = d3.keys(data[0])
|
||||||
|
.filter(function (key) { return key !== labelVar;}); //B
|
||||||
|
|
||||||
|
data.forEach(function (d) { //D
|
||||||
|
var y0 = 0;
|
||||||
|
d.mapping = varNames.map(function (name) {
|
||||||
|
return {
|
||||||
|
name: name,
|
||||||
|
label: d[labelVar],
|
||||||
|
y0: y0,
|
||||||
|
y1: y0 += +d[name]
|
||||||
|
};
|
||||||
|
});
|
||||||
|
d.total = d.mapping[d.mapping.length - 1].y1;
|
||||||
|
});
|
||||||
|
|
||||||
|
x.domain(data.map(function (d) { return (d.date); })); //E
|
||||||
|
y.domain([0, d3.max(data, function (d) { return d.total; })]);
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.attr("class", "x axis")
|
||||||
|
.attr("transform", "translate(0," + height + ")")
|
||||||
|
.call(xAxis)
|
||||||
|
.selectAll("text")
|
||||||
|
.attr("class", "bar")
|
||||||
|
.on("click", function (d) { window.location.href = "/base64Decoded/"+'?date_from='+d+'&date_to='+d })
|
||||||
|
.style("text-anchor", "end")
|
||||||
|
.attr("transform", "rotate(-45)" );
|
||||||
|
|
||||||
|
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");
|
||||||
|
|
||||||
|
var selection = svg.selectAll(".series")
|
||||||
|
.data(data)
|
||||||
|
.enter().append("g")
|
||||||
|
.attr("class", "series")
|
||||||
|
.attr("transform", function (d) { return "translate(" + x((d.date)) + ",0)"; });
|
||||||
|
|
||||||
|
selection.selectAll("rect")
|
||||||
|
.data(function (d) { return d.mapping; })
|
||||||
|
.enter().append("rect")
|
||||||
|
.attr("class", "bar_stack")
|
||||||
|
.attr("width", x.bandwidth())
|
||||||
|
.attr("y", function (d) { return y(d.y1); })
|
||||||
|
.attr("height", function (d) { return y(d.y0) - y(d.y1); })
|
||||||
|
.style("fill", function (d) { return color(d.name); })
|
||||||
|
.style("stroke", "grey")
|
||||||
|
.on("mouseover", function (d) { showPopover.call(this, d); })
|
||||||
|
.on("mouseout", function (d) { removePopovers(); })
|
||||||
|
.on("click", function(d){ window.location.href = "/base64Decoded/" +'?type='+ d.name +'&date_from='+d.label+'&date_to='+d.label; });
|
||||||
|
|
||||||
|
data.forEach(function(d) {
|
||||||
|
if(d.total != 0){
|
||||||
|
svg.append("text")
|
||||||
|
.attr("class", "bar")
|
||||||
|
.attr("dy", "-.35em")
|
||||||
|
//.on("click", (window.location.href = "/base64Decoded/"+'?date_from='+d.date) )
|
||||||
|
.attr('x', x(d.date) + x.bandwidth()/2)
|
||||||
|
.attr('y', y(d.total))
|
||||||
|
.on("click", function () {window.location.href = "/base64Decoded/"+'?date_from='+d.date+'&date_to='+d.date })
|
||||||
|
.style("text-anchor", "middle")
|
||||||
|
.text(d.total);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
drawLegend(varNames);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLegend (varNames) {
|
||||||
|
var legend = svg.selectAll(".legend")
|
||||||
|
.data(varNames.slice().reverse())
|
||||||
|
.enter().append("g")
|
||||||
|
.attr("class", "legend")
|
||||||
|
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
|
||||||
|
|
||||||
|
legend.append("rect")
|
||||||
|
.attr("x", 152)
|
||||||
|
.attr("width", 10)
|
||||||
|
.attr("height", 10)
|
||||||
|
.style("fill", color)
|
||||||
|
.style("stroke", "grey");
|
||||||
|
|
||||||
|
legend.append("text")
|
||||||
|
.attr("class", "svgText")
|
||||||
|
.attr("x", 150)
|
||||||
|
.attr("y", 6)
|
||||||
|
.attr("dy", ".35em")
|
||||||
|
.style("text-anchor", "end")
|
||||||
|
.text(function (d) { return d; });
|
||||||
|
}
|
||||||
|
|
||||||
|
function removePopovers () {
|
||||||
|
$('.popover').each(function() {
|
||||||
|
$(this).remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPopover (d) {
|
||||||
|
$(this).popover({
|
||||||
|
title: d.name,
|
||||||
|
placement: 'auto top',
|
||||||
|
container: 'body',
|
||||||
|
trigger: 'manual',
|
||||||
|
html : true,
|
||||||
|
content: function() {
|
||||||
|
return "date: " + d.label +
|
||||||
|
"<br/>num: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); }
|
||||||
|
});
|
||||||
|
$(this).popover('show')
|
||||||
|
}
|
||||||
|
|
||||||
|
chart.onResize = function () {
|
||||||
|
var aspect = 1000 / 500, chart = $("#thesvg");
|
||||||
|
var targetWidth = chart.parent().width();
|
||||||
|
chart.attr("width", targetWidth);
|
||||||
|
chart.attr("height", targetWidth / aspect);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.chart = chart;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function barchart_type(url, id) {
|
function barchart_type(url, id) {
|
||||||
|
|
||||||
|
|
@ -283,12 +458,13 @@ function barchart_type(url, id) {
|
||||||
var yAxis = d3.axisLeft(y)
|
var yAxis = d3.axisLeft(y)
|
||||||
.ticks(10);
|
.ticks(10);
|
||||||
|
|
||||||
var svg = d3.select(id).append("svg")
|
/*var svg = d3.select(id).append("svg")
|
||||||
.attr("width", width + margin.left + margin.right)
|
.attr("width", width + margin.left + margin.right)
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.attr("id", "thesvg")
|
||||||
.append("g")
|
.append("g")
|
||||||
.attr("transform",
|
.attr("transform",
|
||||||
"translate(" + margin.left + "," + margin.top + ")");
|
"translate(" + margin.left + "," + margin.top + ")");*/
|
||||||
|
|
||||||
|
|
||||||
d3.json(url)
|
d3.json(url)
|
||||||
|
|
@ -357,10 +533,11 @@ function barchart_type(url, id) {
|
||||||
.attr("dy", "-.35em")
|
.attr("dy", "-.35em")
|
||||||
//.text(function(d) { return d.value; });
|
//.text(function(d) { return d.value; });
|
||||||
.text(d.value)
|
.text(d.value)
|
||||||
|
.style("text-anchor", "middle")
|
||||||
{% if daily_type_chart %}
|
{% if daily_type_chart %}
|
||||||
.attr('x', x(d.date) + x.bandwidth()/4)
|
.attr('x', x(d.date) + x.bandwidth()/2)
|
||||||
{% else %}
|
{% else %}
|
||||||
.attr('x', x(d.date.substring(5)) + x.bandwidth()/4)
|
.attr('x', x(d.date.substring(5)) + x.bandwidth()/2)
|
||||||
{% endif %}
|
{% endif %}
|
||||||
.attr('y', y(d.value));
|
.attr('y', y(d.value));
|
||||||
}
|
}
|
||||||
|
|
@ -371,163 +548,6 @@ function barchart_type(url, id) {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{% if not type and not daily_type_chart %}
|
|
||||||
<script>
|
|
||||||
var margin = {top: 20, right: 55, bottom: 30, left: 40},
|
|
||||||
width = 1000 - margin.left - margin.right,
|
|
||||||
height = 500 - margin.top - margin.bottom;
|
|
||||||
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
|
|
||||||
|
|
||||||
var y = d3.scaleLinear().rangeRound([height, 0]);
|
|
||||||
|
|
||||||
var xAxis = d3.axisBottom(x);
|
|
||||||
|
|
||||||
var yAxis = d3.axisLeft(y);
|
|
||||||
|
|
||||||
var color = d3.scaleOrdinal(d3.schemeSet3);
|
|
||||||
|
|
||||||
var svg = d3.select("#barchart_type").append("svg")
|
|
||||||
.attr("id", "thesvg")
|
|
||||||
.attr("viewBox", "0 0 1000 500")
|
|
||||||
.attr("width", width + margin.left + margin.right)
|
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
|
||||||
.append("g")
|
|
||||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
||||||
|
|
||||||
function barchart_type(url, id) {
|
|
||||||
|
|
||||||
/*var stack = d3.stack()
|
|
||||||
stack.values(function (d) { return d.values; })
|
|
||||||
.offset("zero")
|
|
||||||
.x(function (d) { return x(d.label); })
|
|
||||||
.y(function (d) { return d.value; });*/
|
|
||||||
|
|
||||||
/*var area = d3.svg.area()
|
|
||||||
.interpolate("cardinal")
|
|
||||||
.x(function (d) { return x(d.label); })
|
|
||||||
.y0(function (d) { return y(d.y0); })
|
|
||||||
.y1(function (d) { return y(d.y0 + d.y); });*/
|
|
||||||
|
|
||||||
//var color = d3.scale.ordinal().range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]);
|
|
||||||
|
|
||||||
d3.json("/base64Decoded/range_type_json")
|
|
||||||
.then(function(data){
|
|
||||||
|
|
||||||
var labelVar = 'date'; //A
|
|
||||||
var varNames = d3.keys(data[0])
|
|
||||||
.filter(function (key) { return key !== labelVar;}); //B
|
|
||||||
|
|
||||||
data.forEach(function (d) { //D
|
|
||||||
var y0 = 0;
|
|
||||||
d.mapping = varNames.map(function (name) {
|
|
||||||
return {
|
|
||||||
name: name,
|
|
||||||
label: d[labelVar],
|
|
||||||
y0: y0,
|
|
||||||
y1: y0 += +d[name]
|
|
||||||
};
|
|
||||||
});
|
|
||||||
d.total = d.mapping[d.mapping.length - 1].y1;
|
|
||||||
});
|
|
||||||
|
|
||||||
x.domain(data.map(function (d) { return (d.date).substring(5); })); //E
|
|
||||||
y.domain([0, d3.max(data, function (d) { return d.total; })]);
|
|
||||||
|
|
||||||
svg.append("g")
|
|
||||||
.attr("class", "x axis")
|
|
||||||
.attr("transform", "translate(0," + height + ")")
|
|
||||||
.call(xAxis)
|
|
||||||
.selectAll("text")
|
|
||||||
.style("text-anchor", "end")
|
|
||||||
.attr("transform", "rotate(-45)" );
|
|
||||||
|
|
||||||
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");
|
|
||||||
|
|
||||||
var selection = svg.selectAll(".series")
|
|
||||||
.data(data)
|
|
||||||
.enter().append("g")
|
|
||||||
.attr("class", "series")
|
|
||||||
.attr("transform", function (d) { return "translate(" + x((d.date).substring(5)) + ",0)"; });
|
|
||||||
|
|
||||||
selection.selectAll("rect")
|
|
||||||
.data(function (d) { return d.mapping; })
|
|
||||||
.enter().append("rect")
|
|
||||||
.attr("class", "bar_stack")
|
|
||||||
.attr("width", x.bandwidth())
|
|
||||||
.attr("y", function (d) { return y(d.y1); })
|
|
||||||
.attr("height", function (d) { return y(d.y0) - y(d.y1); })
|
|
||||||
.style("fill", function (d) { return color(d.name); })
|
|
||||||
.style("stroke", "grey")
|
|
||||||
.on("mouseover", function (d) { showPopover.call(this, d); })
|
|
||||||
.on("mouseout", function (d) { removePopovers(); })
|
|
||||||
.on("click", function(d){ window.location.href = "/base64Decoded/" +'?type='+ d.name +'&date_from='+d.label+'&date_to='+d.label; });
|
|
||||||
|
|
||||||
drawLegend(varNames);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawLegend (varNames) {
|
|
||||||
var legend = svg.selectAll(".legend")
|
|
||||||
.data(varNames.slice().reverse())
|
|
||||||
.enter().append("g")
|
|
||||||
.attr("class", "legend")
|
|
||||||
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
|
|
||||||
|
|
||||||
legend.append("rect")
|
|
||||||
.attr("x", 152)
|
|
||||||
.attr("width", 10)
|
|
||||||
.attr("height", 10)
|
|
||||||
.style("fill", color)
|
|
||||||
.style("stroke", "grey");
|
|
||||||
|
|
||||||
legend.append("text")
|
|
||||||
.attr("class", "svgText")
|
|
||||||
.attr("x", 150)
|
|
||||||
.attr("y", 6)
|
|
||||||
.attr("dy", ".35em")
|
|
||||||
.style("text-anchor", "end")
|
|
||||||
.text(function (d) { return d; });
|
|
||||||
}
|
|
||||||
|
|
||||||
function removePopovers () {
|
|
||||||
$('.popover').each(function() {
|
|
||||||
$(this).remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showPopover (d) {
|
|
||||||
$(this).popover({
|
|
||||||
title: d.name,
|
|
||||||
placement: 'auto top',
|
|
||||||
container: 'body',
|
|
||||||
trigger: 'manual',
|
|
||||||
html : true,
|
|
||||||
content: function() {
|
|
||||||
return "date: " + d.label +
|
|
||||||
"<br/>num: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); }
|
|
||||||
});
|
|
||||||
$(this).popover('show')
|
|
||||||
}
|
|
||||||
|
|
||||||
VIZ.onResize = function () {
|
|
||||||
var aspect = 1000 / 500, chart = $("#barchart_type");
|
|
||||||
var targetWidth = chart.parent().width();
|
|
||||||
chart.attr("width", targetWidth);
|
|
||||||
chart.attr("height", targetWidth / aspect);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.VIZ = VIZ;
|
|
||||||
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -48,23 +48,23 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- /.col-lg-12 -->
|
<!-- /.col-lg-12 -->
|
||||||
|
|
||||||
<div id="chart">
|
<div id="barchart_type">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.row -->
|
<!-- /.row -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var VIZ = {};
|
var chart = {};
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
activePage = "page-base64Decoded"
|
activePage = "page-base64Decoded"
|
||||||
$("#"+activePage).addClass("active");
|
$("#"+activePage).addClass("active");
|
||||||
|
|
||||||
VIZ.stackBarChart = barchart_type('url', 'id')
|
chart.stackBarChart = barchart_type('url', 'id')
|
||||||
VIZ.onResize();
|
chart.onResize();
|
||||||
});
|
});
|
||||||
$(window).on("resize", function() {
|
$(window).on("resize", function() {
|
||||||
VIZ.onResize();
|
chart.onResize();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -82,7 +82,7 @@ var yAxis = d3.axisLeft(y);
|
||||||
|
|
||||||
var color = d3.scaleOrdinal(d3.schemeSet3);
|
var color = d3.scaleOrdinal(d3.schemeSet3);
|
||||||
|
|
||||||
var svg = d3.select("#chart").append("svg")
|
var svg = d3.select("#barchart_type").append("svg")
|
||||||
.attr("id", "thesvg")
|
.attr("id", "thesvg")
|
||||||
.attr("viewBox", "0 0 1000 500")
|
.attr("viewBox", "0 0 1000 500")
|
||||||
.attr("width", width + margin.left + margin.right)
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
|
@ -92,20 +92,6 @@ var svg = d3.select("#chart").append("svg")
|
||||||
|
|
||||||
function barchart_type(url, id) {
|
function barchart_type(url, id) {
|
||||||
|
|
||||||
/*var stack = d3.stack()
|
|
||||||
stack.values(function (d) { return d.values; })
|
|
||||||
.offset("zero")
|
|
||||||
.x(function (d) { return x(d.label); })
|
|
||||||
.y(function (d) { return d.value; });*/
|
|
||||||
|
|
||||||
/*var area = d3.svg.area()
|
|
||||||
.interpolate("cardinal")
|
|
||||||
.x(function (d) { return x(d.label); })
|
|
||||||
.y0(function (d) { return y(d.y0); })
|
|
||||||
.y1(function (d) { return y(d.y0 + d.y); });*/
|
|
||||||
|
|
||||||
//var color = d3.scale.ordinal().range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]);
|
|
||||||
|
|
||||||
d3.json("/base64Decoded/range_type_json")
|
d3.json("/base64Decoded/range_type_json")
|
||||||
.then(function(data){
|
.then(function(data){
|
||||||
|
|
||||||
|
|
@ -126,6 +112,8 @@ function barchart_type(url, id) {
|
||||||
d.total = d.mapping[d.mapping.length - 1].y1;
|
d.total = d.mapping[d.mapping.length - 1].y1;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log(data)
|
||||||
|
|
||||||
x.domain(data.map(function (d) { return (d.date).substring(5); })); //E
|
x.domain(data.map(function (d) { return (d.date).substring(5); })); //E
|
||||||
y.domain([0, d3.max(data, function (d) { return d.total; })]);
|
y.domain([0, d3.max(data, function (d) { return d.total; })]);
|
||||||
|
|
||||||
|
|
@ -165,6 +153,18 @@ function barchart_type(url, id) {
|
||||||
.on("mouseout", function (d) { removePopovers(); })
|
.on("mouseout", function (d) { removePopovers(); })
|
||||||
.on("click", function(d){ window.location.href = "/base64Decoded/" +'?type='+ d.name +'&date_from='+d.label+'&date_to='+d.label; });
|
.on("click", function(d){ window.location.href = "/base64Decoded/" +'?type='+ d.name +'&date_from='+d.label+'&date_to='+d.label; });
|
||||||
|
|
||||||
|
data.forEach(function(d) {
|
||||||
|
if(d.total != 0){
|
||||||
|
svg.append("text")
|
||||||
|
.attr("class", "bar")
|
||||||
|
.attr("dy", "-.35em")
|
||||||
|
.attr('x', x(d.date.substring(5)) + x.bandwidth()/2)
|
||||||
|
.attr('y', y(d.total))
|
||||||
|
.style("text-anchor", "middle")
|
||||||
|
.text(d.total);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
drawLegend(varNames);
|
drawLegend(varNames);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -213,14 +213,14 @@ function showPopover (d) {
|
||||||
$(this).popover('show')
|
$(this).popover('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
VIZ.onResize = function () {
|
chart.onResize = function () {
|
||||||
var aspect = 1000 / 500, chart = $("#thesvg");
|
var aspect = 1000 / 500, chart = $("#thesvg");
|
||||||
var targetWidth = chart.parent().width();
|
var targetWidth = chart.parent().width();
|
||||||
chart.attr("width", targetWidth);
|
chart.attr("width", targetWidth);
|
||||||
chart.attr("height", targetWidth / aspect);
|
chart.attr("height", targetWidth / aspect);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.VIZ = VIZ;
|
window.chart = chart;
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue