title: Plot date against a number in line chart when date varies between days, months or year
body: <p>I have a json data, which contains both date, and number. The date is ranging from days to months to year. How can I plot a graph such that the date adjusts itself according to the data received? If I do not give any ticks count, the ticks label on x-axis start overlapping.</p>
  
  <p>Here is the code for the line chart.</p>
  
  <pre><code> var createLineChart = function(data){
      var convertToISODate = function(d) {
        return new Date(d.date);
      }
  
      // get max and min dates, provided data is in sorted order
      var minDate = convertToISODate(data[0]),
          maxDate = convertToISODate(data[data.length-1]);
  
      var minAccuracy = d3.min(data, function(d) {
        return (d.ad_review_stats.accuracy);
      });
      var maxAccuracy = d3.max(data, function(d) {
        return (d.ad_review_stats.accuracy);
      });
      var differenceInAccuracy = (maxAccuracy - minAccuracy)/2;
  
      var formatYAxis= d3.format('.2f');
      var formatXAxis = d3.time.format("%d-%b-%y");
      var d3Graph = d3.select("#lineGraph"),
        widthOfGraph = 400,
        heightOfGraph = 200,
        marginsForGraph = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        xScale = d3.time.scale().
                range([marginsForGraph.left, widthOfGraph - marginsForGraph.right]).
                domain([minDate, maxDate]),
  
        yScale = d3.scale.linear().
                range([heightOfGraph - marginsForGraph.top, marginsForGraph.bottom]).
                domain([(minAccuracy - differenceInAccuracy), 
                  (maxAccuracy + differenceInAccuracy)]);
  
        xAxis = d3.svg.axis()
          .scale(xScale)
          .tickFormat(formatXAxis),
  
        yAxis = d3.svg.axis()
          .scale(yScale)
          .orient("left")
          .tickFormat(formatYAxis);
  
      d3Graph.append("svg:g")
        .attr("transform", "translate(0," + (heightOfGraph - marginsForGraph.bottom) + ")")
        .call(xAxis);
  
      d3Graph.append("svg:g")
      .attr("transform", "translate(" + (marginsForGraph.left) + ",0)")
      .call(yAxis);
  
      var lineGeneratorFunction = d3.svg.line()
        .x(function(d) {
          return xScale(convertToISODate(d));
        })
        .y(function(d) {
          return yScale(Math.round(d.ad_review_stats.accuracy * 100) / 100);
        })
        .interpolate("cardinal");
  
      var divForTooltip = d3.select("body").append("div")   
      .attr("class", "tooltip")               
      .style("opacity", 0);
  
      d3Graph.append('svg:path')
        .attr('d', lineGeneratorFunction(data))
        .attr('stroke', 'rgb(44, 160, 44)')
        .attr('stroke-width', 4)
        .attr('fill', 'none');
  
      d3Graph.selectAll("circle.line")
        .data(data)
        .enter().append("svg:circle")
        .attr("class", "line")
        .style("fill", "rgb(44, 160, 44)")
        .attr("cx", function(d) { 
          return xScale(convertToISODate(d)) 
        })
        .attr("cy", function(d) { 
          return yScale(d.ad_review_stats.accuracy);
        })
        .attr("r", 2)
  
        .on("mouseover", function(d) {
            d3.select(this).transition()
              .duration(200)
              .attr("r", 8);
  
            divForTooltip.transition()        
                .duration(200)      
                .style("opacity", .9);      
            divForTooltip.html(d.ad_review_stats.accuracy + ", "  + d.date)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {  
            d3.select(this).transition()
            .duration(200)
            .attr("r", 2);   
  
            divForTooltip.transition()        
              .duration(500)      
              .style("opacity", 0);   
        });
    };
  </code></pre>
  
  <p>You can see the running fiddle here:
  <a href="https://jsfiddle.net/k98Lxrkf/" rel="nofollow">https://jsfiddle.net/k98Lxrkf/</a></p>
  
  <p>Any help would be greatly appreciated.</p>