SheilaR1966
New Member
I can't figure out why the data won't display correctly. I think it has something to do with the scale of the axis but I can't find any solutions. There is a line being drawn but it's to small to see. The example I was using had a time scale of several years where as I am only doing one week.Below is the code.\[code\] <!DOCTYPE html><meta charset="utf-8"><style>body { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}.x.axis path { display: none;}.line { fill: none; stroke: steelblue; stroke-width: 1.5px;}</style></head><body><script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> <script>var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;var parseDate = d3.time.format("%d-%b-%y").parse;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.close); });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 + ")");var data = http://stackoverflow.com/questions/15905000/[{"close":71,"date":"9-Apr-13"},{"close":14,"date":"9-Apr-13"},{"close":10,"date":"9-Apr-13"},{"close":109,"date":"9-Apr-13"},{"close":62,"date":"9-Apr-13"},{"close":61,"date":"9-Apr-13"},{"close":62,"date":"9-Apr-13"},{"close":32,"date":"9-Apr-13"},{"close":19,"date":"9-Apr-13"}]; data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain(d3.extent(data, function(d) { return d.close; })); 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("Price ($)"); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line);</script></body></html>\[/code\]