small fixes, added graph

templates/solar-pogodbe.html

@@ -161,7 +161,9 @@
         </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/>
 
@@ -323,7 +325,72 @@
     </div>-->
 </body>
 <script src="https://d3js.org/d3.v6.js"></script>
+<style>
+    #my_dataviz .tick line{
+        visibility:hidden;
+    }
+    #my_dataviz path.domain{
+        visibility:hidden;
+    }
+</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) {
+        data = [];
+        for(var key in jsondata) {
+            data.push({'name': key, 'value':jsondata[key]});
+        }
+
+
+        console.log(data);
+
+        // Add X axis
+        var x = d3.scaleLinear()
+            .domain([0,d3.max(data, function (d) { return d.value})])
+            .range([ 0, width]);
+        svg.append("g")
+            .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 ])
+            .domain(data.map(function(d) { return d.name; }))
+            .padding(.1);
+        svg.append("g")
+            .call(d3.axisLeft(y))
+
+        //Bars
+        svg.selectAll("myRect")
+            .data(data)
+            .enter()
+            .append("rect")
+            .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")
+
+
+
+    })
+
 </script>
 </html>