D3 Examples - [Unlisted] Line Chart Example

xxxxxxxxxx
 
<html>
​
  <head>
    <meta charset="utf-8">
    <title>Introduction to d3</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    
    <style>
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
    </style>
  </head>
​
  <body>
    
    <script>
      var jsondata = [
        {
          "dayWise":[
            { "currenttime": "2015-01-29", "avgresptime": 272.20001220703125}, 
            { "currenttime": "2015-01-30", "avgresptime": 177},
            { "currenttime": "2015-01-31", "avgresptime": 34}
          ]
        }
      ];
​
      var format = d3.time.format("%Y-%m-%d");
      
      var data = jsondata[0].dayWise.map(function (d){
        d.date = format.parse(d.currenttime);
        return d;
      });
​
      var margin = {top: 9, right: 31, bottom: 38, left: 36},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
​
      var x = d3.time.scale()
        .range([0, width]);
      
      var y = d3.scale.linear()
        .range([height, 0]);
​
      var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
​
      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
​
      var line = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.avgresptime); })
​
      var svg = d3.select("body").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 + ")");
​
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain(d3.extent(data, function(d) {return d.avgresptime; }));
​
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
​
      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")
          .text("avgresptime");
​
      svg.append("path")
          .datum(data)
          .attr("class", "line")
          .attr("fill", "none")
          .attr("stroke", "blue")
          .attr("d", line);
    </script>
  </body>
</html>
    