BurndownTemplate

Id: 90C06443-2956-4DB2-94AE-36321C40EC1A
Configurable: no — system template
Company: 6E919CFE-74DD-4EBC-8665-3C0D44866649
Created: 2019-07-27 00:00:00
Updated: —

HTML body (3544 chars)

<!DOCTYPE html>
        <head>
          <meta charset="utf-8">
          <script src="https://d3js.org/d3.v4.min.js"></script>
          <style>
            body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
            
            .line {
              fill: none;
              stroke: steelblue;
              stroke-width: 1.5px;
        }
        .h1 {
          font: 200 1.2em "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
          font-weight: bold;
          padding: 20px;
          margin: 0;
          border-bottom: 10px solid #ccc;
          strong {
            font-family: "Segoe UI Black";
            font-weight: bold;
          }
        }
          </style>
        </head>
        
        <body>
          <script>
            
            var svg = d3.select("body").append("svg")
              .attr("width", 850)
              .attr("height", 400)
        
            var margin = {left:50, right:30, top: 60, bottom: 60}
            var width = svg.attr("width") - margin.left - margin.right;
            var height = svg.attr("height") - margin.bottom - margin.top;
            
               var data = ##burndownChartJson## 
            var x = d3.scaleTime()
            	.rangeRound([0, width]);
            var x_axis = d3.axisBottom(x);
            
            var y = d3.scaleLinear()
            	.rangeRound([height, 0]);
            var y_axis = d3.axisBottom(y);
            var xFormat = "%d-%b-%Y";;
            var parseTime = d3.timeParse("%d/%m/%Y");
            
            x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));
          	y.domain([0, ##yMax##]);
        
            var a = function(d) {return d.expected};
            
            var multiline = function(category) {
              var line = d3.line()
                          .x(function(d) { return x(parseTime(d.date)); })
                          .y(function(d) { return y(d[category]); });
              return line;
            }
            
           
        
            var categories = ['expected', 'actual', 'c', 'd'];
            //var color = d3.scale.category10();  // escala com 10 cores (category10)
            var color = d3.scaleOrdinal(d3.schemeCategory10);
            
            var g = svg.append("g")
                .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");
            
            for (i in categories) {
              var lineFunction = multiline(categories[i]);
              g.append("path")
                .datum(data) 
                .attr("class", "line")
                .style("stroke", color(i))
                .attr("d", lineFunction);
            }
            
              // Add the X Axis
          		g.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x).ticks(d3.timeDay.every(1)).tickFormat(d3.timeFormat(xFormat)))
            .selectAll("text")
            .attr("transform", "translate(-20,10)rotate(-45)");
            
        	
              // Add the Y Axis
          		g.append("g")
              .call(d3.axisLeft(y));
        	  
        	  svg.append("text")
        		.attr("class", "h1")
        		.attr("text-anchor", "end")
        		.attr("y", 25)
        		.attr("x", 500)
        		.attr("dy", "0.75em")
        		.text("Work burn down");
        
          </script>
        </body>

Save note (optional, shown in version history)

Reset

Rendered preview — preview as

Version history (0 most recent)

Saved at	By	Size	Note
No saved versions yet. Each Save will record one.

BurndownTemplate

HTML body (3544 chars)

Rendered preview — preview as unfilled (placeholders visible)

Version history (0 most recent)

Rendered preview — preview as