D3.js Simple Line Chart on Array with Dates -
im d3 newbie , having problems creating simple line chart x data being date. having problems reading in date variable (x) local array x.
problem partly call of d3.time.format , returning of svg.line function.
<title>d3 paths 2 tutorial </title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script> var linedatanew = [['2014-07-22 14:00:00',22979.57],['2014-07-22 14:15:00',22980.77],['2014-07-22 14:30:00',22981.99]]; var newdata = []; var newlinedata; (index = 0; index < linedatanew.length; index++) { var strelement = linedatanew[index].tostring() ; var arr = strelement.split(","); newlinedata = newlinedata + "{" + "x:'" + arr[0] + "', y:" + arr[1] + "}" newdata.push(newlinedata); if (index < arr.length) { newlinedata = newlinedata + ","; } } newlinedata = newlinedata + "]"; var parsedate = d3.time.format("%y-%m-%d %h:%m:%s").parse; var canvas = d3.select("body").append("svg") .attr("width", 500) .attr("height",500) var group = canvas.append("g") .attr("transform","translate(100, 100)"); var line = d3.svg.line() .x(function (d) { return d3.time.format("%y-%m-%d %h:%m:%s").parse('2014-07-22 14:15:00'); } ) .x(function (d) { return d3.time.format("%y-%m-%d %h:%m:%s").parse(d.x); } ) // .x(function (d) { return d.x ; } ) .y(function (d) {return d.y; } ) group.selectall("path") .data([newdata]) .enter() .append("path") .attr("d", line) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 10); </script> </body> </html>
Comments
Post a Comment