nipunsadvilkar
9/5/2017 - 12:10 PM

Max-Min-Avg Chart

Max-Min-Avg Chart

index.html
content_copyfile_download
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data = [
	    {
		"Name": "JOB1",
		"Maximum": 40,
		"Minimum": 10,
		"Average": 25
	    },
	    {
		"Name": "JOB2",
		"Maximum": 36,
		"Minimum": 12,
		"Average": 24
	   }

	];
		
			
		    var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
		    var margin = {top: 15, right: 30, bottom: 20, left: 30},
                    width = 960 - margin.left - margin.right,

                    height = 500 - margin.top - margin.bottom;


		    var formatPercent = d3.format(".0%");

		    var x = d3.scale.ordinal()
		      .rangeRoundBands([0, width], .9);

		    var y = d3.scale.linear()
		      .range([height, 0]);

		    var xAxis = d3.svg.axis()
		      .scale(x)
		      .orient("bottom")
		      .tickSize(-1);

		    var yAxis = d3.svg.axis()
		      .scale(y)
		      .orient("left") 
		      .ticks(4, "d")
		      .tickSize(-width, 0, 0)
		      //.ticks(d3.time.minutes, 15)
		      //.tickFormat(d3.time.minute, 15);

		
		     var chart1 = d3.select("body").append("svg")
		      .attr("class","maxminavgchart")
		      .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.Name;
		      }));
		      //x2.domain(data.map(function(d){return d.Average}));
		      y.domain([0, d3.max(data, function(d) {
		        return d.Maximum
		      })]);

		      chart1.append("g")
		        .attr("class", "x axis")
		        .attr("transform", "translate(0," + height + ")")
		        .call(xAxis);

		      chart1.append("g")
		        .attr("class", "y axis")
		        .call(yAxis)
		        .append("text")
		      .attr("transform", "rotate(90)")
		      .attr("y", 6)
		      .attr("dy", "1.71em")
		      .style("text-anchor", "start")
		      .text("Duration(mins)");
		      var eSel = chart1.selectAll(".line")
		        .data(data)
		        .enter();
		        
		      eSel.append("line")
		        .attr("class", "line")
		        .style("fill", "steelblue")
		        .attr("x1", function(d) {
		          return x(d.Name);
		        })
		        .attr("y1", function(d) {
		          return y(d.Maximum);
		        })
              .attr("x2", function(d) {
		          return x(d.Name);
		        })
		        .attr("y2", function(d) {
		          return y(d.Minimum);
		        });
		        
		     
        eSel.append("circle")
        .attr("r", 6.5)
        .attr("cx", function(d) { return x(d.Name); })
        .attr("cy", function(d) { return y(d.Average); })
        .attr("fill", "green");
        eSel.append("circle")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.Name); })
        .attr("cy", function(d) { return y(d.Maximum); })
        .attr("fill", "red");
        eSel.append("circle")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.Name); })
        .attr("cy", function(d) { return y(d.Minimum); })
        .attr("fill", "blue");
		    function type(d) {
		      d.Maximum = +d.Maximum;
		      return d;
		    }	
			
</script>