How To Force D3js To Take Hours Into Account When X Axis Is Created?

Fiddle : http://jsfiddle.net/8eba8q33/2/ I have my x axis which is a time scale var x = d3.time.scale().range([0, width]); On the x axis i want to be able to have exactly 10 ticks

Solution 1:

exp1();

functionexp1(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    }//,// {//        "CurrentQuantity": "25",//       "LastUpdated": "/Date(1418907098197)/"//   }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            returnformatDate(d);
        })
        .orient("bottom");

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

    data.forEach(function(d) {
        var date = newDate(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            returnx( d.LastUpdated); 
        })
        .y(function(d) {
            returny(d.CurrentQuantity); 
        });

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

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return"rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

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








exp2();


functionexp2(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    },
      {
        "CurrentQuantity": "25",
       "LastUpdated": "/Date(1418907098197)/"
    }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            returnformatDate(d);
        })
        .orient("bottom");

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

    data.forEach(function(d) {
        var date = newDate(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            returnx( d.LastUpdated); 
        })
        .y(function(d) {
            returny(d.CurrentQuantity); 
        });

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

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return"rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

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

    chart {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .x.axis path {
        /*display: none;*/
    }

    .line {
        stroke: rgb(142, 188, 0);
        stroke-width: 2px;
        stroke-linecap: square;
        stroke-linejoin: round;
        fill-opacity: 1;
        stroke-opacity: 1;
        fill: none;
    }

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><strong>Chart1</strong><divid="chart1"></div><br><strong>Chart2</strong><divid="chart2"></div>

After doing some work out, I've came to know that there is nothing wrong, The thing is our assumption. We need to focus on little things.

1)Observe your data Your data contains dates from Date {Thu Dec 18 2014 18:21:38 GMT+0530 (India Standard Time)} to Date {Fri Jan 09 2015 14:20:27 GMT+0530 (India Standard Time)} and we are setting x domain using these dates range, d3 is calculating and arranging the scale to fit in our width, by displaying in our specified format. The format is year-month-date Hours:Minutes:Seconds. See the Chart2 x-axis

And

2) I've removed that December month data, See the x-axis of the Chart1.

Hope you understood.