Trying to get my x function working correctly here and i get NaNs back... help!?
For the record, my dates are coming from JSON.NET so that's why they look the way they do.
i'm trying to follow this d3 line chart example
The issue was the weird dates coming back from ASP.NET. See this discussion
| <html> | |
| <head> | |
| <style type="text/css"> | |
| .chart rect { | |
| stroke: white; | |
| fill: steelblue; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg class="chart" width="800" height="200"> | |
| </svg> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| <script> | |
| var data = [ | |
| [ | |
| "/Date(1354802434000-0500)/", | |
| 255356 | |
| ], | |
| [ | |
| "/Date(1354712413000-0500)/", | |
| 384524 | |
| ], | |
| [ | |
| "/Date(1354626039000-0500)/", | |
| 416284 | |
| ], | |
| [ | |
| "/Date(1354111259000-0500)/", | |
| 324204 | |
| ], | |
| [ | |
| "/Date(1353934819000-0500)/", | |
| 507864 | |
| ], | |
| [ | |
| "/Date(1353675620000-0500)/", | |
| 390408 | |
| ], | |
| [ | |
| "/Date(1353589201000-0500)/", | |
| 374528 | |
| ], | |
| [ | |
| "/Date(1353527136000-0500)/", | |
| 362348 | |
| ], | |
| [ | |
| "/Date(1352728811000-0500)/", | |
| 363308 | |
| ], | |
| [ | |
| "/Date(1352383213000-0500)/", | |
| 339404 | |
| ] | |
| ]; | |
| data = data.map(function(element) { | |
| var startTimeISO8601 = d3.time.format.utc(Date(element[0])) | |
| return [startTimeISO8601, element[1]] | |
| }) | |
| // Create the margins for the stuff! | |
| var margin = { top: 20, right: 20, bottom: 30, left: 50 }, | |
| width = 800 - margin.left - margin.right, | |
| height = 200 - margin.top - margin.bottom; | |
| var x = d3.scale.linear() | |
| .domain([0, data.length]) | |
| .range([0, width]) | |
| // Time x scale | |
| // Set up the x scale | |
| var xExtent = d3.extent(data, function (d) { | |
| return d[0] | |
| }) | |
| var x = d3.time.scale() | |
| .domain(xExtent) | |
| .range([0, width]) | |
| // Set up the y scale | |
| var yExtent = d3.extent(data, function (d) { | |
| return d[1] | |
| }) | |
| var y = d3.scale.linear() | |
| .domain(yExtent) | |
| .range([height, 0]) | |
| // The line function where the x and y values are calculated | |
| var line = d3.svg.line() | |
| .x(function (d, i) { | |
| return x(d[0]) | |
| }) | |
| .y(function (d) { | |
| return y(d[1]) | |
| }) | |
| // ## Chart | |
| var svg = d3.select('svg') | |
| .attr('class', 'chart') | |
| .attr('width', 800) | |
| .attr('height', 200) | |
| .append('g') | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // ? | |
| // Add the data into the chart element | |
| svg.append('path') | |
| .datum(data) | |
| .attr('class', 'line') | |
| .attr('d', line) | |
| </script> | |
| </body> | |
| </html> |
Discussion here on google groups
My issue was that ASP.NET sends back weird dates in JSON, so i switched to ISO 8601.