D3.Js- passing data set from C# to javascript does not work

Question

This question is related to the following question that I posted some time ago.

I accepted one answer and based on that I did some modifications.

    var data = $('#<%=hdnDtArray.ClientID%>').val();
    var svg = d3.select("svg"),
      margin = { top: 20, right: 20, bottom: 30, left: 50 },
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," 
      + margin.top + ")");

   var parseTime = d3.timeParse("%d-%b-%y");

  var x = d3.scaleTime()
      .rangeRound([0, width]);

  var y = d3.scaleLinear()
      .rangeRound([height, 0]);

  var line = d3.line()
      .x(function (d) { return x(parseTime(d.date)); })
      .y(function (d) { return y(d.close); });



  x.domain(d3.extent(data, function (d) { return parseTime(d.date); }));
  y.domain(d3.extent(data, function (d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);

Here, "hdnDtArray" is an hidden input field in asp.net through which I pass the data set to the JavaScript code. I debugged and found that it looks like the following.

   [{"date":"2016.07.19","close":185697.89},
    {"date":"2016.07.20","close":185697.89},
     {"date":"2016.07.21","close":186601.1},
     {"date":"2016.07.22","close":187273.89},
     {"date":"2016.07.25","close":186807.74},
     {"date":"2016.07.26","close":186893.26},....]

Graph is not displayed and there is this error

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".

And, at the same time what I want Y axis to have is Years, months depending on the context. Like Jan, Feb, Mar etc. or else, 2015,2016,2017 etc. or else 2015-12-01,2015-12-02,2015-12-03 etc. I should be able to pass these data through another array.

Can someone pls help ? I am a newbie to D3.js

Gerardo Furtado · Accepted Answer · 2017-07-19 08:45:15Z

0

The problem here is your specifier. Since your dates are...

"2016.07.19"

... your specifier should be:

var parseTime = d3.timeParse("%Y.%m.%d");

For a list of values for the specifier string, have a look at the API here.

Here is your code with that change only:

var data = [{
  "date": "2016.07.19",
  "close": 185697.89
}, {
  "date": "2016.07.20",
  "close": 185697.89
}, {
  "date": "2016.07.21",
  "close": 186601.1
}, {
  "date": "2016.07.22",
  "close": 187273.89
}, {
  "date": "2016.07.25",
  "close": 186807.74
}, {
  "date": "2016.07.26",
  "close": 186893.26
}]
var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y.%m.%d");

var x = d3.scaleTime()
  .rangeRound([0, width]);

var y = d3.scaleLinear()
  .rangeRound([height, 0]);

var line = d3.line()
  .x(function(d) {
    return x(parseTime(d.date));
  })
  .y(function(d) {
    return y(d.close);
  });

x.domain(d3.extent(data, function(d) {
  return parseTime(d.date);
}));
y.domain(d3.extent(data, function(d) {
  return d.close;
}));

g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .select(".domain")
  .remove();

g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
  .attr("fill", "#000")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("Price ($)");

g.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", 1.5)
  .attr("d", line);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="300"></svg>

answered Jul 19, 2017 at 8:45

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prasadika Over a year ago

Thanks so much ! I executed the code with the dummy data you've given and after that with the data it passes to the javascript code (obtained through debugging) , then it works. But when I use it like this var data = $('#<%=hdnDtArray.ClientID%>').val(); and try to pass data from C# , it does not work. It generates the same error.

Prasadika Over a year ago

btw, could you please point out the code segment you've used to have months in the X axys ?

Gerardo Furtado Over a year ago

The specifier was the only thing I changed in your code. Regarding the C# issue, I suggest you post another question narrowing it down. Your problem here was the specifier, which was fixed. Don't ask more than one issue per question: keep it one problem, one question.

Collectives™ on Stack Overflow

D3.Js- passing data set from C# to javascript does not work

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related