[Unlisted] Line Chart Example

This example fixes broken code originally written by Tejashwini S., posted to the D3 mailing list - constructing line graph in d3.js.

Built with blockbuilder.org

<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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js