CODEWITHSUNDEEP
d3.jslinechart
user2024080
user2024080

Reputation: 5091

d3js - my line chart is not working

I am trying to draw a line-chart using d3js. But it seems that is not working either i am not getting any error.

How to overcome from this issue. i couldn't post your the full of my code, please visit my plunk to see the real issue.

$(function () {

// the part not working for me

datas.forEach(function(d) {


  d.date = parseDate(d.date);
  d.close = d.close;

  // Scale the range of the data
    x.domain(d3.extent(d, function(d) { 
      return d.date; 

    }));

    y.domain([0, d3.max(d, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(d));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

});


})

Live Demo

Upvotes: 1

Views: 1440

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Mistake 1:

You are making domain of x and y again and again in the for loop.

datas.forEach(function(d) {


  d.date = parseDate(d.date);
  d.close = d.close;

  // Scale the range of the data
    x.domain(d3.extent(d, function(d) { 
      return d.date; 

    }));

Well you don't need a for loop at all. Move all the code with the for loop outside it:

// Get the data 
x.domain(d3.extent(datas, function(d) { 
      d.date = parseDate(d.date);//convert d.date to date using parser.
      return d.date; 
    }));
    y.domain([0, d3.max(datas, function(d) { return d.close; })]);



    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);    
      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(datas));

Last:

Instead of making the path like this in the for loop.

   svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(d));

It should be

  svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(datas));

working code here

Hope this helps!

Upvotes: 3

Related Questions