score:0

Accepted answer

looks like a lot of stuff is missing from your code.

i made a few changes in the code and it works now.

//data from webservice
var jsondata = [{ "year": "2017", "jan": "0", "feb": "21", "mar": "65", "apr": "25", "may": "33", "jun": "30", "jul": "17", "aug": "26", "sep": "0", "oct": "5", "nov": "33", "dec": "12" }, { "year": "2018", "jan": "10", "feb": "0", "mar": "0", "apr": "0", "may": "0", "jun": "0", "jul": "0", "aug": "0", "sep": "0", "oct": "0", "nov": "0", "dec": "0" }];

var width = 400;
var height = 400;
var svg = d3.select('#linechart');

var x = d3.scaleband().range([0, width]);
var y = d3.scalelinear().range([height, 0]);
var months = [];
d3.keys(jsondata[0]).filter(function(key) {
  if (key !== "year") {
    months.push(key)
  }
});
var years = [];
for (var i = 0; i < jsondata.length; i++) {
  years.push(jsondata[i]['year']);
}
var tests = months.map(function(m) {
  return {
    month: m,
    values: jsondata.map(function(d) {
      return {
        year: d.year,
        quote: parseint(+d[m])
      };
    })
  };
});

x.domain(tests.map(function(d) {
  return d.month;
}));
var extent = [d3.min(tests, function(c) {
    return d3.min(c.values, function(v) {

      return v.quote;
    });
  }),
  d3.max(tests, function(c) {
    return d3.max(c.values, function(v) {
      return v.quote;
    });
  })
]

y.domain(extent);


// create line

var drawline = d3.line()
  .curve(d3.curvebasis)
  .x(function(d) {
    return x(d.month);
  })
  .y(function(d) {
    return y((d.values[0]['quote']));
  });


var draw = svg.append('g').append("path")
  .datum(tests)
  .attr("class", "line")
  .attr("d", drawline)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", 1.5);

More Query from same tag