webapps/portal-oddajanje-solar
16
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

success messages, graph

Browse Source
This commit is contained in:
Leon Noe Jovan
2022-01-05 19:33:43 +01:00
parent 6c1fdc06fc
commit 48230b623a
11 changed files with 93 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/solar-pogodbe.html
View File

@@ -159,11 +159,22 @@
{% endfor %}
</div>
</div>
<div class="row">
<div class="col-12">
<h2>Število oddaj na uporabnika</h2>
</div>
</div>
<div class="row">
<div class="col-6">
<div id="my_dataviz">
</div>
</div>
</div>
</div>
<div id="my_dataviz">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
@@ -335,22 +346,29 @@
</style>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 30, bottom: 40, left: 90},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
var data;
// Parse the Data
d3.json("/topuploads-by-user/").then(function(jsondata) {
if(Object.keys(jsondata).length < 1) {
return;
}
data = [];
console.log(Object.keys(jsondata).length);
var margin = {top: 20, right: 0, bottom: 40, left: 0};
var width = document.getElementById("my_dataviz").clientWidth - margin.left - margin.right;
var height = Object.keys(jsondata).length * 56;
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("overflow","visible")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
for(var key in jsondata) {
data.push({'name': key, 'value':jsondata[key]});
}
@@ -366,16 +384,19 @@
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
//.attr("transform", "translate(-10,0)")
.style("text-anchor", "center");
// Y axis
var y = d3.scaleBand()
.range([ 0, data.length*30 ])
.range([ 0, data.length*56 ])
.domain(data.map(function(d) { return d.name; }))
.padding(.1);
.padding(0);
svg.append("g")
.call(d3.axisLeft(y))
.selectAll("text")
.style("text-anchor", "start")
.style("font-size", "14px")
.attr("transform", "translate(8,-36)");
//Bars
svg.selectAll("myRect")
@@ -385,8 +406,9 @@
.attr("x", x(0) )
.attr("y", function(d) { return y(d.name); })
.attr("width", function(d) { return x(d.value); })
.attr("height", 20 )
.attr("fill", "#006CB7")
.attr("height", 32 )
.attr("fill", "#006CB7");