Line chart issue - X axis data getting repeated

[Prit]

Hi,

In line chart, x axis data ("Apr month") getting repeated. Please check the attached screenshot.

I want the chart to be displayed like below format.

30

20

10

Mar    Apr   May

Please check the code below.

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 425 - margin.left - margin.right,
    height = 225 - margin.top - margin.bottom;

            var parseDate = d3.time.format("%d-%b-%y").parse;
           
            var x = d3.time.scale().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);

            var xAxis = d3.svg.axis()
                        .scale(x).ticks(3).

    .tickFormat(d3.time.format("%b"))

                        .orient("bottom");

            var yAxis = d3.svg.axis()
                        .scale(y).ticks(4)
                        .orient("left");

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

            var svg = d3.select("body").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 + ")");

   var data = [
    { "date": "30-Mar-11", "close": "30" },
    { "date": "27-Apr-11", "close": "20" },
    { "date": "1-May-11", "close": "10" }
   ];

            data.forEach(function (d) {
                d.date = parseDate(d.date);
                d.close = +d.close;
            });
           
            x.domain(d3.extent(data, function (d) { return d.date; }));
            y.domain(d3.extent(data, function (d) { return d.close; }));
         
            svg.append("g")
                .attr("class", "x axis")
               .attr("transform", "translate(0," + height + ")")
               .call(xAxis);

            svg.append("g")
               .attr("class", "y axis")
               .call(yAxis);

            svg.append("g")
               .attr("class", "grid")
               .call(yAxis
                   .tickSize(-width, 0, 0)
                  .tickFormat(""));

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


This is blocking issue for me.  Please help me to solve this.

If you have any basic understanding of line chart with date example.  Please share it

Thanks
 

[Laurie Skelly]

When you call d3.svg.axis().scale(x).ticks(3), you expect 3 ticks, but you get 5. This is normal behavior for this method: 

# scale.ticks(count[, step]): "....The specified count is only a hint; the scale may return more or fewer values depending on the input domain."

So your tick isn't getting repeated, you just have more of them than you expect. They look the same because you've specified them to be labeled with the month only. 

If you replace the label specification     

.tickFormat(d3.time.format("%b"))

with 

.tickFormat(d3.time.format("%d %b"))

, this will be clear. If you only want one data point per month, discard the day of the month information. The graph looks lopsided because there are about 27 days between point 1 and point 2, and only about 4 days between point two and three.  

[Prit]

Hi Laurie Skelly,

Thank you so much for your great explanation.  I fixed it, it is working fine now.