Trying to utilize d3.js for presenting a graph using a JSON object (string) retrieved from a server in the code behind of an aspx webpage. After spending some time troubleshooting, I've reached a roadblock.
The error message received is:
d3.v5.min.js:2 Error: <path> attribute d: Expected number, "MNaN,189.61165048…".
Upon logging the values of dttm and xScale dttm, this is what's obtained (presenting only one instance, not the entire outcome):
dttm: 2019-07-29 23:59:53 xScale: undefined
It appears that when calling xScale(d.dttm) in the line function, it's returning null which may be causing the issue.
Any guidance on a solution would be highly appreciated!
var jsonObject = <%=json%>;
var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%SZ");
var formatTime = d3.timeFormat("%Y-%m-%d %H:%M:%S");
jsonObject.forEach(function (d) {
d.dttm = formatTime(parseTime(d.dttm));
d.perc = +d.perc;
});
var dataNest = d3.nest()
.key(function (d) { return d.server_name; })
.entries(jsonObject);
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var xScale = d3.scaleTime()
.domain(d3.extent(jsonObject, function (d) { return d.dttm; }))
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, 103])
.range([height, 0]);
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
var xAxis = d3.axisBottom().scale(xScale).ticks(5);
var yAxis = d3.axisLeft().scale(yScale).ticks(5);
var line = d3.line()
.x(function (d) {
console.log("dttm: " + d.dttm + " xScale: " + xScale(d.dttm));
return xScale(d.dttm);
})
.y(function (d) { return yScale(d.perc); });
var svg = d3.select("#dataviz")
.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 + ")");
d3.data = jsonObject;
dataNest.forEach(function (d, i) {
console.log("index: " + i + " server: " + d.key + " color: " + colorScale(i) + " the object is below...");
console.log(d);
svg.append("path")
.attr("class", "line")
.attr("d", line(d.values))
.style("stroke", colorScale(i))
});
UPDATE: Highlighted below are useful logs from Console.log()
jsonObject.forEach(function (d) {
console.log(parseTime(d.dttm));
d.dttm = formatTime(parseTime(d.dttm));
d.perc = +d.perc;
});
Output (a few examples selected from a larger dataset:
Mon Jul 29 2019 23:58:43 GMT-0600 (Mountain Daylight Time)
Mon Jul 29 2019 23:58:46 GMT-0600 (Mountain Daylight Time)
Mon Jul 29 2019 23:58:48 GMT-0600 (Mountain Daylight Time)
Mon Jul 29 2019 23:59:08 GMT-0600 (Mountain Daylight Time)
jsonObject.forEach(function (d) {
d.dttm = formatTime(parseTime(d.dttm));
d.perc = +d.perc;
});
console.log(jsonObject);
Resultant output (excerpt showcasing sample entries from the large dataset): https://i.sstatic.net/xIZit.jpg
Demonstrating the JSON.stringify for jsonObject
[{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:03","perc":3},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:04","perc":3},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:06","perc":18},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:09","perc":10},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:13","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:14","perc":5},"server_name":"XXXXXXX","dttm... (truncated for space)